angular ng-model is not working as expected

Question

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.

Your code is working fine

Ram_T
– Ram_T

2016-12-29 13:43:31 +00:00
Commented Dec 29, 2016 at 13:43 — Ram_T
– Ram_T, Commented Dec 29, 2016 at 13:43

Dhaval Marthak · Accepted Answer · 2016-12-29 13:51:14Z

1

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

answered Dec 29, 2016 at 13:51

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Selva Over a year ago

Thanks Dhaval, after removing value from html I can access the selected option inside ng-model .

Selva Over a year ago

your answer is really helpful. Thank U Dhaval.

Collectives™ on Stack Overflow

angular ng-model is not working as expected

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related