Question: I have two select boxes. The second select box populates from first select box.

I have applied a filter for the second select box to populate as per the options selected in first select box. The second select box populates from an array `var outputformats = [];`

This is my code

HTML

```
<select name="reporttype"id="reporttype" 
        ng-init="reporttype='1115'" 
        ng-model="reporttype">
    <option value="1115">Previous Day Composite Report</option>
    <option value="1114">ACH Receive</option>
</select>

<select name="outputformat" id="outputformat" 
        ng-model="outputformat" 
        ng-options="format for format in outputformats | outputformatfilter: reporttype:this">      
</select> Value : {{outputformat}}

```

Filter

```
angular.module('myApp.outputformatfilter',[])
    .filter('outputformatfilter', function () {
        return function (input,selectedreport,scope) {

            var outputFormatReport  = {"1115":"HTML,PDF","1114":"CSV,EXCEL"};
            var outputformats = outputFormatReport[selectedreport].split(',');

            return outputformats;
        };
    });

```

Now what I want is whenever the options in second select box changes, **its first option should be selected by default**, that is the first option from the array should be selected by default.

**UPDATE**: 

Updated fiddle, added `ng-if= reporttype !== ''` to second select box

**[FIDDLE](https://jsfiddle.net/Kunalh/bt99eg1o/7/)**

Answer: 
On your controller, watch the filtered options and act on that:

```
function myController ($scope) {
    // watch the filtered output formats
    $scope.$watchCollection("filteredOutputFormats", function(val) {
        // select the first one when it changes
        $scope.outputformat = val[0];
    });
}

```

Make sure you assign the filtered results to a $scope variable:

```
<select name="outputformat" id="outputformat" 
        ng-model="outputformat" 
        ng-options="format for format in filteredOutputFormats = (outputformats | outputformatfilter: reporttype:this)">        
</select>

```

[JSFIDDLE](https://jsfiddle.net/bt99eg1o/6/)
Try this:-

```js
  var myApp = angular.module('myApp',['myApp.outputformatfilter']);

myApp.controller('mainController',function($scope,$filter){
    var outputformats = [];
   $scope.outputFormatReport  = {"1115":"HTML,PDF,CSV,EXCEL","1114":"PHP,HTML,PDF","default":"CSV,HTML"};
   $scope.$watch('reporttype', function (newValue, oldValue, scope) {
        outputformats = $scope.outputFormatReport[newValue].split(',');
          $scope.outputformat=outputformats[0]
      }); 
});

angular.module('myApp.outputformatfilter',[]).filter('outputformatfilter', function () {
          return function (input,selectedreport,scope) {
             console.log('input is '+input+' \nReport is '+selectedreport);
             console.log(scope.outputFormatReport);
            if(selectedreport!= undefined){
                 var outputformats =            
              console.log( scope.outputFormatReport[selectedreport]);
              outputformats = scope.outputFormatReport[selectedreport].split(',');

              console.log(outputformats);
            }else{
              return {};
            }

            return outputformats;
          };
        });
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="mainController">

<select name="reporttype"id="reporttype" ng-init="reporttype='1115'" ng-model="reporttype">
                <option value="1115">Previous Day Composite Report</option>
                <option value="1114">ACH Receive</option>
              </select>
<select name="outputformat" id="outputformat" ng-model="outputformat" ng-options="format for format in outputformats | outputformatfilter: reporttype:this">    
              </select> Value : {{outputformat}}

</div>

</body>
```