Plunkr: http://plnkr.co/edit/RgNcSg?p=preview
I have a drop down of "locations" which is populated by an object array. If I set the object value, which I am doing in my controller, it is not selected in the dropdown, why not? You can see by the html output that the binding works and the value is set properly, but the drop down box cannot be set from the controller.
Controller:
var myapp = angular.module('myapp', []);
myapp.controller('ctrl', function($scope) {
$scope.locationOptions = [
{id: 1, name: "option 1"},
{id: 2, name: "option 2"}];
$scope.options = {
location: { id:1, name: "option 1"}
}
});
Template:
<div class="form-group">
<label for="location" class="control-label col-md-2">Location</label>
<div class="col-md-3">
<select id="location"
class="form-control"
ng-options="loc.name for loc in locationOptions"
ng-disabled="loadingLocations"
ng-model="options.location">
</select>
</div>
</div>
LocationID: {{options.location.id}}
Location: {{options.location.name}}
