ng-options with unique does not work

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'
        }
    ]
]

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.