How to set AngularJS select value based from model value? - angularjs

Question

I have an array that contains my supplier list:
$scope.supplierList = [{id=1, name='supplier 1'}, {id=2, name='supplier 2'}];
Then I have a model(lets call it product) that I got from a service with values like:
id=1
name=Product A
supplier=supplier 1(this is an object reference)
When I load the product to a form for editing, I need to have 'supplier 1' be the selected option, I have tried different steps but nothing seems to work, my code is as follows:
<select ng-model="product.supplier" ng-options="supplier.name for supplier in supplierList">
<option value="">Select a Supplier</option>
</select>
And in the controller:
$scope.update = function (id) {//user clicks edit button, form modal shows up with filled up values because of model binding
$scope.product = Product.get({id: id});//retrieving the product
$scope.product.supplier = $scope.supplierList[1];//trying out if i can change the selected to something else, never works! Always defaults to select a supplier
//supplier is always deemed undefined
};
Any ideas? thanks!

Answer 1

I'm guessing that Product is created with $resource(..). What isn't obvious is that the Product.get(..) call will return an (almost) empty object at first, which will be filled with the data from the response once it is received. At the same time, any previous values in the object will be removed.
To set the supplier you would need to do something like
$scope.product = Product.get({id: id}, function (product) {
product.supplier = $scope.supplierList[1];
})
Take a look at https://docs.angularjs.org/api/ngResource/service/$resource and do consider going with basic $http calls instead. ngResource is nice and comfy at first, but it's abstractions soon becomes problematic as illustrated by your problem.

Answer 2

I suppose that Product.get({id: id}); is a call to a resource, so it will be executed asynchronously. Data that will come from the server will override your "$scope.product.supplier" assignment.
Try to change this code to:
$scope.update = function (id) {
$scope.product = Product.get({id: id}, function(){
$scope.product.supplier = $scope.supplierList[1];
});
};