CODEWITHSUNDEEP
angularjs
Selva
Selva

Reputation: 123

angular ng-model is not working as expected

Template:

<select id="siteOptions" ng-model="siteVal" ng-change="siteChange()">
     <option ng-repeat = "site in sites" ng-selected="{{site == selectedSite}}"   value="site">{{site}}</option>
 </select>

Controller:

$scope.siteChange = function(){
        console.log(" $scope.siteVal--> "+ $scope.siteVal);
}

I could able to populate values in dropdown properly, but when I try to select value in dropdown I could see "$scope.siteVal--> undefined". Even when I select the dropdown value multiple time ng-change is triggering only once.

Upvotes: 1

Views: 182

Answers (1)

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

Remove .value attribute from your html markup and your code would work fine!

<select id="siteOptions" ng-model="siteVal" ng-change="siteChange()">
     <option ng-repeat = "site in sites" ng-selected="{{site == selectedSite}}">{{site}}</option>
</select>

From the DOCS

Note: ngSelected does not interact with the select and ngModel directives, it only sets the selected attribute on the element. If you are using ngModel on the select, you should not use ngSelected on the options, as ngModel will set the select value and selected option

Here is the plunker which demonstrates the same

Upvotes: 1

Related Questions