AngularJS-ng-select无法按预期工作

Question

I have a filter drop down for some tabular data that reads data from a local storage item, the select tag is shown below, and below that is the code to add items to the select tag and the model for the filter.

The issue is that whilst the data filtered is correct when you refresh the page, the selected item only shows the correct value if the local storage value is true.

No matter what value the local storage item is selected="selected" is always added to the "Excluded from Search" option.

Can't for the life of me work out why, any help advice appreciated.

<select class="form-control form-control-sm" ng-model="filterSearch" ng-change="setFilterS()" id="theFilterS" >                            
    <option ng-selected="{{option.value == filterSearch}}" ng-repeat="option in filterSearchOptions" value="{{option.value}}" >{{option.DisplayName}}</option>
</select>

$scope.filterSearch = localStorage.getItem("FilterSearch");

$scope.filterSearchOptions = [{
        value: '',
        DisplayName: 'All',
    }, {
        value: 'false',
        DisplayName: 'Included in Search',
    }, {
        value: 'true',
        DisplayName: 'Excluded from Search',
    }];

Answer 1

You should try with the ng-options directive which IMO gives a simpler approach then ng-repeat

 angular.module('app',[]).controller('testCtrl',function($scope){ $scope.filterSearch = 'true'; $scope.filterSearchOptions = [{ value: '', DisplayName: 'All', }, { value: 'false', DisplayName: 'Included in Search', }, { value: 'true', DisplayName: 'Excluded from Search', }]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="testCtrl"> <select class="form-control form-control-sm" ng-model="filterSearch" ng-change="setFilterS()" id="theFilterS" ng-options="option.value as option.DisplayName for option in filterSearchOptions"> </select> {{filterSearch}} </div>