AngularJS - setting the selected value of the dropdown does not work

Question

I made a fiddle replicating my problem here: http://jsfiddle.net/U3pVM/2840/

As the name implies, I cannot set the selected value for the selected value using ng-options.

I searched and tried all the possible solutions that I found. Any help or suggestions would be appreciated!

HTML

<div ng-app> <h2>Todo</h2> <div ng-controller="TodoCtrl"> <select ng-model="ddlRooms" ng-options="r.id as r.Name for r in Rooms"> </select> {{$scope.test}} </div> </div> 

Angular

 function TodoCtrl($scope) { $scope.Rooms = [{ Name: 'Toddler', id: 1 },{ Name: 'other', id: 2 }]; $scope.options = [{ Name: 'other', id: 2 }]; $scope.ddlRooms = $scope.options[0]; $scope.test = 'bla'; } 

Answer 1

Since you are doing id as name , you need to assign model id:

 $scope.ddlRooms = $scope.options[0].id; 

Answer 2

better to do:

 <select ng-model="ddlRooms.id" ng-options="r.id as r.Name for r in Rooms">