AngularJS filter doesn't work with my data: associative array

Question

I am still new in AngularJS but I am trying to add a filter on my data but I can't figure out how to get it to work. My data is an associative array, when I add a normal array to test, it all works.

I call my directive in the html:

<dispatch data='listToDispatch' search="searchDispatch"></dispatch>

My directive:

define(['dashboard/module', 'lodash'], function (module) {

'use strict';

return module.registerDirective('dispatch', function () {
    return {
        controller: 'DashboardCtrl',
        restrict: 'E',
        scope: {
            data: '=',
            search: '='
        },
        template: '<div class="padding-dispatch" ng-repeat="(name,user) in data | filter:search">' +
                        '<strong>{{name}}</strong>' +
                        '{{search}}' +
                        '<div class="dispatch-charts" chartjsdoughnut="user[0]"></div>' +
                        '<div class="dispatch-charts" chartjsdoughnut="user[1]"></div>' +
                        '<div class="dispatch-charts" chartjsdoughnut="user[2]"></div>' +
                        '<div class="dispatch-charts" chartjsdoughnut="user[3]"></div>' +
                        '<hr />' +
                    '</div>'
    }
});

My data which is passed on to the directive:

$scope.dataPersons =
    {
        "Sidney":
        [

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
                {
                    value: 36,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is used"
                }
            ],

            [
                {
                    value: 40,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is unique"
                },
               {
                   value: 30,
                   color: "#7eb3cf",
                   highlight: "#1675a9",
                   label: "is unique"
               }
            ],

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
               {
                   value: 30,
                   color: "#7eb3cf",
                   highlight: "#1675a9",
                   label: "is used"
               }
            ],

            [
               {
                   value: 70,
                   color: "#1675a9",
                   highlight: "#1675a9",
                   label: "is in use"
               },
               {
                   value: 30,
                   color: "#7eb3cf",
                   highlight: "#1675a9",
                   label: "is used"
               }
            ]
        ],
        "Cedric":
        [

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
                {
                    value: 30,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is used"
                }
            ],

            [
                {
                    value: 76,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
               {
                   value: 30,
                   color: "#7eb3cf",
                   highlight: "#1675a9",
                   label: "is used"
               }
            ],

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
               {
                   value: 30,
                   color: "#7eb3cf",
                   highlight: "#1675a9",
                   label: "is used"
               }
            ],

            [
               {
                   value: 70,
                   color: "#1675a9",
                   highlight: "#1675a9",
                   label: "is in use"
               },
               {
                   value: 30,
                   color: "#7eb3cf",
                   highlight: "#1675a9",
                   label: "is used"
               }
            ]
        ]
    };
    $scope.dataVehicles =
    {
        "Xavier":
        [

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
                {
                    value: 36,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is used"
                }
            ],

            [
                {
                    value: 40,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is unique"
                },
                {
                    value: 30,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is unique"
                }
            ],

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
                {
                    value: 30,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is used"
                }
            ],

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
                {
                    value: 30,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is used"
                }
            ]
        ],
        "Tarek":
        [

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
                {
                    value: 30,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is used"
                }
            ],

            [
                {
                    value: 76,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
                {
                    value: 30,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is used"
                }
            ],

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
                {
                    value: 30,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is used"
                }
            ],

            [
                {
                    value: 70,
                    color: "#1675a9",
                    highlight: "#1675a9",
                    label: "is in use"
                },
                {
                    value: 30,
                    color: "#7eb3cf",
                    highlight: "#1675a9",
                    label: "is used"
                }
            ]
        ]
    };

Answer 1

In your directive template remove the word "filter" and the ":" which follows it. The template should look like below:

 template: '<div class="padding-dispatch" ng-repeat="(name,user) in data | search">' +
                    '<strong>{{name}}</strong>' +
                    '{{search}}' +
                    '<div class="dispatch-charts" chartjsdoughnut="user[0]"></div>' +
                    '<div class="dispatch-charts" chartjsdoughnut="user[1]"></div>' +
                    '<div class="dispatch-charts" chartjsdoughnut="user[2]"></div>' +
                    '<div class="dispatch-charts" chartjsdoughnut="user[3]"></div>' +
                    '<hr />' +
                '</div>'