How can I select an item from a select list after populating it?

Issue

I have the following HTML:

<span>SubTopic {{ modal.option.sSubTopic }}</span>
<select data-ng-model="modal.option.sSubTopic"
   data-ng-options="item.id as item.name for item in modal.option.subTopics">
</select>

In my controller

 $http.get(url, { cache: us.oneDayCache })
    .success(function (data) {
       $scope.modal.option.subTopics = data;
       $scope.modal.option.sSubTopic = "2";
    })

After the get the {{ }} value is set to 2 but the 2nd item of my select is not selected.

Is there something wrong with the way I am doing this?

Solution

You are specifying the value of the field to be the id of the item with item.id as in the ngOptions. The model value needs to match the value of the data id you want selected. If you want the second object, it would be data[1].id

$http.get(url, { cache: us.oneDayCache })
    .success(function (data) {
       $scope.modal.option.subTopics = data;
       $scope.modal.option.sSubTopic = data[1].id;
    });

Demo: http://jsfiddle.net/TheSharpieOne/gteX9/2/

Answered By - TheSharpieOne