Plunkr: http://plnkr.co/edit/RgNcSg?p=preview
I have a dropdown menu displaying different "locations," which are sourced from an array of objects. Despite setting the object value in my controller, it does not appear selected in the dropdown menu. The HTML output shows that the binding is functioning correctly and the value is being properly set, but for some reason, the selection cannot be made through 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}}