Setting default value in select drop-down using Angularjs

Question

I have an object as below. I have to display this as a drop-down:

var list = [{id:4,name:"abc"},{id:600,name:"def"},{id:200,name:"xyz"}]

In my controller I have a variable that carries a value. This value decided which of the above three items in the array will be selected by default in the drop-down:

 $scope.object.setDefault = 600;

When I create a drop-down form item as below:

<select ng-model="object.setDefault" ng-options="r.name for r in list">                 

I face two problems:

1. the list is generated as

   <option value="0">abc</option>
   <option value="1">def</option>
   <option value="2">xyz</option>
   

   instead of

   <option value="4">abc</option>
   <option value="600">def</option>
   <option value="200">xyz</option>
   

2. No option gets selected by default even though i have ng-model="object.setDefault"

Answer 1

Problem 1:

The generated HTML you're getting is normal. Apparently it's a feature of Angular to be able to use any kind of object as value for a select. Angular does the mapping between the HTML option-value and the value in the ng-model. Also see Umur's comment in this question: How do I set the value property in AngularJS' ng-options?

Problem 2:

Make sure you're using the following ng-options:

<select ng-model="object.item" ng-options="item.id as item.name for item in list" />

And put this in your controller to select a default value:

object.item = 4