ng-model in select box is not working correctly

Question

I am using angular js to draw select boxes.

 <select ng-model="selected">
     <option value="{{obj.id}}" ng-repeat="obj in values">{{obj.name}} </option>
 </select>
 selected id - {{selected}} 

Here the default selected is not initialized according to value selected.

Have made a fiddle for the problem.

Solution 1

You should use ngOptions directive to render selectbox options:

<select ng-model="selected" ng-options="obj.id as obj.name for obj in values"></select>

Fixed demo: http://jsfiddle.net/qWzTb/1984/

Solution 2

case 2 is updated in this plunker

http://jsfiddle.net/26yjn8ru/

 <div ng-repeat="arr in itr">
    <select ng-model="arr.id"
      ng-options="value.id  as value.name for value in values">
    </select>

Solution 3

Just add ng-selected="selected == obj.id" in the option tag

<option value="{{obj.id}}" ng-repeat="obj in values" ng-selected="selected == obj.id" > 
{{obj.name}} 
</option>