ng-options with unique does not work

Question

I have following array for cars. I am trying to use ng-options on this array to display only color category as link along with "all colors" option.

All, red, yellow, blue

<div ng-repeat="client in clients">
  <label>{{client.Name}}</label>
  <select ng-model="opt" ng-options="i.color for i in client.cars | unique: 'color'">
       <option value="">All</option>
       <option value="">{{i.color}}</option>
  </select>
</div>

If I remove the "| unique: 'color'" syntax then i get all the colors with repetitions.

If i keep " | unique: color" from syntax, then I recieve following error: angular.js:13424 Error: [$injector:unpr] Unknown provider: uniqueFilterProvider <- uniqueFilter. I have included ui-filters.js(https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js) at my home.html to use the unique filter functionality but it's not picking it up. also my main angular module is like this:

angular.module("cartApp", [])
.controller('fs',function($scope,$http){
//code here
});

I beleve the issue might be incuding the angularJS UI module. If I change the '[]' to '['ui.filters'] then it does not recognize the module.

clients:
[
    "Name":'test',
    "age":34,
    cars:
    [
        {
            "carid": 1,
            "carname": 'camry',
            "color": 'red'
        },
        {
            "carid": 2,
            "carname": 'mustang',
            "color": 'red'
        },
        {
            "carid": 3,
            "carname": 'landcruiser',
            "color": 'yellow'
        },
        {
            "carid": 4,
            "carname": 'focus',
            "color": 'blue'
        },
        {
            "carid": 5,
            "carname": 'civic',
            "color": 'blue'
        }
    ]
]

Answer 1

If you bind your select on the cars array, you have twice the red form car 1 and 2, once the yellow and twice the blue, so it's normal that the colors appear more than once.

What you could do, is create a collection of colors based on your cars, and add the all items option:

Here is an example using lodash:

_.forEach(clients, function(client) {
    // add the available colors for each client
    client.colors = _.uniq(_.map(clients.car, 'color'));
    client.colors.unshift('all');}
);

And in your HTML:

<div ng-repeat="client in clients">
  <label>{{client.Name}}</label>
  <select ng-model="selectedColor" ng-options="color for color in colors"></select>
</div>

The other solution is to use ng-repeat on your <options>, but it's less elegant.

Hope I got your problem right.

Answer 2

First of all your data set are not in correct form. An array does not have name-value pair.

For example your dataset is something like this.

$scope.Data = [one: "one"];

Which is not a correct form of an array.

Your dataset should like this.

{
                "Name":"test",
                "age":"34",
                "cars":
                [
                    {
                        "carid": 1,
                        "carname": 'camry',
                        "color": 'red'
                    },
                    {
                        "carid": 2,
                        "carname": 'mustang',
                        "color": 'red'
                    },
                    {
                        "carid": 3,
                        "carname": 'landcruiser',
                        "color": 'yellow'
                    },
                    {
                        "carid": 4,
                        "carname": 'focus',
                        "color": 'blue'
                    },
                    {
                        "carid": 5,
                        "carname": 'civic',
                        "color": 'blue'
                    }
                ]
            };

Answer 3

There was nothing wrong with the syntax. The problem was the load sequencing of script files. I was loading AngularJS UI script after the app.js script. It should have been other way around.