My issue involves a select box that is defined in the following manner:
<select ng-model="selectedSupplier" ng-options="supplier.name for supplier in suppliers">
</select>
Within my controller, there is a button that doesn't have any real function but helps to highlight a problem I'm encountering when trying to change the selected value programmatically:
When this particular function is executed, it successfully sets the options in the select box and also updates the selected option:
$scope.foo = function() {
var foos = [{"id":1,"name":"No 1"},{"id":2,"name":"No 2"},{"id":3,"name":"No 3"},{"id":4,"name":"No 4"}];
$scope.suppliers = foos;
$scope.selectedSupplier = foos[2];
}
However, when I modify the function as shown below, it still sets the options correctly, but the selected option ends up being a blank one rather than the one I intended:
$scope.foo = function() {
var foos = [{"id":1,"name":"No 1"},{"id":2,"name":"No 2"},{"id":3,"name":"No 3"},{"id":4,"name":"No 4"}];
$scope.suppliers = foos;
$scope.selectedSupplier = {"id":3,"name":"No 3"};
}
I'm puzzled by this behavior. Is there a way to set the selected option using an object different from the original ones defined?