ng-model in select box with default value is empty

Question

I am trying to use ng-model to get value from the selection tag with Angular js. However, when I render this code, the selected box is empty when the page finished loading. I tried to set the first option to be selected, but that doesn't work. I tried selected="selected" but doesn't work. I also tried other methods mentioned in documentation about ng-option but it doesn't seem to help. I NEED the ng-model value in order for other parts of my page to work.

<select id="teamSelection" ng-model="teamSelected"> <option value="All" selected>All</option> <option value="1">A</option> <option value="2)">B</option> <option value="3">C</option> <option value="4">D</option> </select>

Ming Huang · Accepted Answer · 2015-08-28 23:35:27Z

6

I just ran into the same problem earlier this week. The fix is actually simpler than I thought. You can just add a ng-init="teamSelected='All'" as an attribute to your select tag:

<select id="teamSelection" ng-model="teamSelected" ng-init="teamSelected='All'"> <option value="All" selected>All</option> <option value="1">A</option> <option value="2)">B</option> <option value="3">C</option> <option value="4">D</option> </select>

answered Aug 28, 2015 at 23:35

Ming Huang

1,3803 gold badges16 silver badges28 bronze badges

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

Comments

bobleujr · Accepted Answer · 2015-08-28 23:39:11Z

2

Set you $scope.teamSelected = 3 (index of the desired object) for example, and it should work fine like in this codepen

answered Aug 28, 2015 at 23:39

bobleujr

1,1741 gold badge10 silver badges24 bronze badges

1 Comment

Bernardo Dal Corno Over a year ago

beware of the index when using track by

Collectives™ on Stack Overflow

ng-model in select box with default value is empty

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related