I am facing an issue with a select control in my Angular app. The options for the select are generated dynamically from an array of objects in the scope. When I try to pre-select a specific option on app init by changing a bound variable on the scope, it doesn't work properly.
Interestingly, it works fine when the ng-option of the select returns a string instead of the full object. I'm not sure if this is a bug in Angular or if I am missing something in my implementation.
Here is the code snippet:
<div ng-controller="selectCtrl" ng-app>
Doesn't work when select's ngModel value is object:<br />
<select ng-model="valueObject" ng-options="o.label for o in options"></select><br />
<pre>{{valueObject | json}}</pre>
Works when select's ngModel value is string:<br />
<select ng-model="valueString" ng-options="o.value as o.label for o in options"></select>
<pre>{{valueString | json}}</pre>
JS:
function selectCtrl($scope) {
$scope.options = [
{label: 'a', value: '1', someId: 333},
{label: 'b', value: '2', someId: 555}
];
$scope.valueObject = {label: 'a', value: '1', someId: 333};
$scope.valueString = '1';
};
JS Fiddle: http://jsfiddle.net/apuchkov/FvsKW/6/