0

my angular ng-options directive is not working. The ng-model is not updating while changing the options.

angular snippets

scope.searchoptions = [
    { name: "All", id: 1 },
        {
            name: "Devices",
            id: 2
        }, {
            name: "Sessions",
            id: 3
        }, { 
            name: "Alerts", 
            id: 4 
        },{
            name: "Files", 
            id: 5 
        }];
scope.currentSearch = scope.searchoptions[0]; // Intial object 

// Html snipets

<div class="form-group l-h m-a-0">
    <select class="form-control"
        ng-options="item.name for item in searchoptions track by item.id" 
        ng-model="currentSearch">
    </select>
</div>

The given code is not updating the model while selecting an option

Please note: ng-init failed for me in my specific case. Problem was that the value I was using was not available yet at the time ng-init ran: I got the value via an ajax call and at that moment the ng-init was already finished

Bhumi Shah
  • 9,323
  • 7
  • 63
  • 104
Binson Eldhose
  • 993
  • 3
  • 14
  • 35

2 Answers2

0

You need to initialize value for the ng-model in select.ng-init="currentSearch = searchoptions[0]"

var app = angular.module("mainApp",  []);

app.controller('mainCtrl', function($scope){
  $scope.searchoptions = [
            { name: "All", id: 1 },
            {
                name: "Devices",
                id: 2
            }, {
                name: "Sessions",
                id: 3
            }, { name: "Alerts", id: 4 },
            { name: "Files", id: 5 }
        ];
        //$scope.currentSearch = scope.searchoptions[0].name; // Intial object
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div  ng-app="mainApp" ng-controller="mainCtrl">
  <div class="form-group l-h m-a-0">
        <select ng-if="searchoptions" class="form-control" ng-init="currentSearch = searchoptions[0]" ng-options="item.name for item in searchoptions track by item.id" ng-model="currentSearch">
        </select>
    
    {{currentSearch}}
    </div>
</div>
byteC0de
  • 5,153
  • 5
  • 33
  • 66
  • ng-init failed for me in my specific case. Problem was that the value I was using was not available yet at the time ng-init ran: I got the value via an ajax call and at that moment the ng-init was already finished..@nisar @jimbrooism – Binson Eldhose Apr 27 '16 at 10:26
  • add a ng-if="searchoptions" outer container @BinsonEldhose – byteC0de Apr 27 '16 at 10:28
  • @BinsonEldhose are tried ng-if="searchoptions.length" – byteC0de Apr 27 '16 at 11:28
0

There are minor mistakes in your code. Please see given code and update it.Given code is working properly.

angular snippets

$scope.searchoptions = [
            { name: 'All', id: '1' },
            { name: 'Devices', id: '2'}, 
            { name: 'Sessions', id: '3'}, 
            { name: 'Alerts', id: '4' },
            { name: 'Files', id: '5' }
];
$scope.currentSearch = $scope.searchoptions[0];
Riddhi Gohil
  • 1,758
  • 17
  • 17