javascript angularjs filter ng-options angularjs-ng-options

Angular Filter not working on ng-options

I am new in AngularJs. I have three Select boxes with ng-options. It was working fine before adding filter.

<td style="33%">
    <select ng-options="car.BaseStation for car in UnUsedCars | orderBy:'BaseStation'" ng-model="selected.BaseStation">
        <option value="">All Locations</option>
    </select>
</td>
<td style="33%">
    <select ng-options="car.CarType for car in UnUsedCars | filter: selected.BaseStation | orderBy:'CarType'" ng-model="selected.CarType">
        <option value="">All Car Types</option>
    </select>
</td>
<td style="33%">
    <select ng-options="car.Color for car in UnUsedCars | filter: selected.BaseStation | filter: selected.CarType | orderBy:'Color'" ng-model="selected.Color">
        <option value="">All Car Colors</option>
    </select>
</td>

The second Select box is expected to act according to the first select box value and third one is expected to work according to the first and second.

The data to these 3 select came from an array of objects 'UnUsedCars'. A sample input is as follows:

[{
    "CarType" : "Audi",
    "Color" : "White",
    "BaseStation" : "Canada"
},
{
    "CarType" : "BMW",
    "Color" : "White",
    "BaseStation" : "U.S.A"
},
{
    "CarType" : "Benz",
    "Color" : "Black",
    "BaseStation" : "Canada"
}]

My JS is as follows

       scope.selected = {
            BaseStation: null,
            CarType: null,
            Color: null
        };

        scope.$watch('selected.BaseStation', function() {
            scope.selected.CarType = null;
        });

        scope.$watch('selected.BaseStation', 'selected.CarType', function() {
            scope.selected.Color = null;
        });

What are the mistakes I made here?

Solution

First, you don't need to use $watch or anything like this.

Well, actually your ngModel is receiving an object from each <select>, but since you want to get only the property you should use the as syntax, as below:

<select ng-options="car.BaseStation as car.BaseStation for car in UnUsedCars | orderBy: 'BaseStation'" ng-model="selected.BaseStation">

Take a look on the snippet:

(function() {
  angular
    .module('app', [])
    .controller('mainCtrl', mainCtrl);

  function mainCtrl($scope) {
    $scope.UnUsedCars = [  
       {  
          "CarType":"Audi",
          "Color":"White",
          "BaseStation":"Canada"
       },
       {  
          "CarType":"BMW",
          "Color":"White",
          "BaseStation":"U.S.A"
       },
       {  
          "CarType":"Benz",
          "Color":"Black",
          "BaseStation":"Canada"
       }
    ];
  }
})();

<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <table>
    <tr>
      <td style="33%">
        <select ng-options="car.BaseStation as car.BaseStation for car in UnUsedCars | orderBy: 'BaseStation'" ng-model="selected.BaseStation">
          <option value="">All Locations</option>
        </select>
      </td>
      <td style="33%">
        <select ng-options="car.CarType as car.CarType for car in UnUsedCars | filter: selected.BaseStation | orderBy: 'CarType'" ng-model="selected.CarType">
          <option value="">All Car Types</option>
        </select>
      </td>
      <td style="33%">
        <select ng-options="car.Color as car.Color for car in UnUsedCars | filter: selected.BaseStation | filter: selected.CarType | orderBy: 'Color'" ng-model="selected.Color">
          <option value="">All Car Colors</option>
        </select>
      </td>
    </tr>
  </table>
</body>

</html>