ng-model and ng-options not matching up?

Garuuk picture Garuuk · Jul 23, 2014 · Viewed 16.6k times · Source

I have a method in my resources object that comes in as:

resources.type

otherstuff: 'more strings'
type:'specifictype'
morestuff: 'morestuff'

The user can change this type with a dropdown / through another call that gets a list of all possible types which looks like resourceList.types which has a list of objects like this json

types:
     [
         {name:'resourcetype1'}, 
         {name:'resourcetype2'},
         etc...
     ],

my html looks like:

<select ng-model="resources.type" ng-options="name.name for name in resourceList.types">
</select>

The select/drop down box populates with my resourceList.type stuff but when the page loads the ng-model doesn't set to the already selected resource type. It actually selects a blank entry at the top of the drop down when you click. Is angular picky about this? How can I get the ng-model to behave the way I want it to?

I tried messing around with ng-options with the different ways of getting the repeat but I feel like this is more how angular connects the model. Does it just match the string to the ng-options list?

Here's the plnkr as you can see it's not defaulting to type1

http://plnkr.co/edit/NyWACtFQuyndR6CG8lpN?p=info

Answer

gkalpak picture gkalpak · Jul 23, 2014

In Angular, the model is the single source of truth.
This means that if you want a value selected (and bound to your ngModel) you need to assign it to the model:

<select ng-model="resources.type"
        ng-options="type.name as type.name for type in resourceList.types">
</select>

$scope.resources = {...};
$scope.resourceList = {
    ...
    types: [
        {name: 'resourcetype1'}, 
        {name: 'resourcetype2'},
        ...
    ]
};

// Set the model to the desired value
$scope.resources.type = $scope.resourceList.types[0].name;

See, also, this short demo.