Setting default value with asynchronous data Asked Apr 18 '13 at 20:57 Active Jan 09 '14 at 02:44 Viewed 7,864 times 4 I have a drop-down list <select ng-model="referral.organization" ng-options="key as value for (key, value) in organizations"> </select> where organizations is filled using a $http request. I also have a resource referral which includes several properties, including an integer organization that corresponds to the value saved in the drop-down. Currently, the drop-down works fine and selecting a new value will update my referral resource without issue. However, when the page loads the drop-down is blank rather than displaying the value of referral.organization that was retrieved from the server (that is, when opening a previously saved referral form). I understand that this is likely due to my resource being empty when the page first loads, but how do I update the drop-down when the information has been successfully retrieved? Edit: {{ organizations[referral.organization] }} successfully lists the selected value if placed somewhere else on the page, but I do not know how to give the tag this expression to display. Second Edit: The problem was apparently a mismatch between the key used in ngOptions and the variable used in ngModel. The <select> option's were being returned as strings from WebAPI (despite beginning as Dictionary) while the referral model was returning integers. When referral.organization was placed in ngModel, Angular was not matching 2723 to "2723" and so forth. I tried several different things, but the following works well and is the "cleanest" to me. In the callback for the $resource GET, I simply change the necessary variables to strings like so: $scope.referral = $resource("some/resource").get(function (data) { data.organization = String(data.organization); ... }); Not sure if this would be considered a problem with Angular (not matching 1000 to "1000") or WebAPI (serializing Dictionary<int,String> to { "key":"value" }) but this is functional and the <select> tag is still bound to the referral resource. angularjs edited Apr 19 '13 at 03:04 Joshua Dutton asked Apr 18 '13 at 20:57 Joshua Dutton 1,190 8 11 Is this question (and these answers) more about the fact that the options are asynchronous or more about the fact that the options are objects? – Jason Swett Dec 22 '16 at 15:21 3 Answers3 3 For simple types you can just set $scope.referral.organization and it'll magically work: http://jsfiddle.net/qBJK9/ <div ng-app ng-controller="MyCtrl"> <select ng-model="referral.organization" ng-options="c for c in organizations"> </select> </div> - function MyCtrl($scope) { $scope.organizations = ['a', 'b', 'c', 'd', 'e']; $scope.referral = { organization: 'c' }; } If you're using objects, it gets trickier since Angular doesn't seem smart enough to know the new object is virtually the same. Unless there's some Angular hack, the only way I see forward is to update $scope.referral.organization after it gets loaded from the server and assign it to a value from $scope.organizations like: http://jsfiddle.net/qBJK9/2/ <div ng-app ng-controller="MyCtrl"> <select ng-model="referral.organization" ng-options="c.name for c in organizations"></select> {{referral}} <button ng-click="loadReferral()">load referral</button> </div> - function MyCtrl($scope) { $scope.organizations = [{name:'a'}, {name:'b'}, {name:'c'}, {name:'d'}, {name:'e'}]; $scope.referral = { organization: $scope.organizations[2] }; $scope.loadReferral = function () { $scope.referral = { other: 'parts', of: 'referral', organization: {name:'b'} }; // look up the correct value angular.forEach($scope.organizations, function(value, key) { if ($scope.organizations[key].name === value.name) { $scope.referral.organization = $scope.organizations[key]; return false; } }); }; } edited Apr 18 '13 at 21:47 Langdon answered Apr 18 '13 at 21:22 Langdon 19,875 18 88 107 `referral` is retrieved using a GET request to my WebApi (e.g. `api/referrals/{id}`). Existing referral forms have the `organization` variable already, and in fact `organizations[referral.organization]` works. However, I do not know how to display this value in the element, it only works if I do something like `{{ organizations[referral.organization] }}` elsewhere on the page. – Joshua Dutton Apr 18 '13 at 21:31

Answer 1

You can assign referral.organization to one of objects obtained from ajax:

$scope.referral.organization = $scope.organizations[0]

I created simple demo in plunker. Button click handler changes list of objects and selects default one.

$scope.changeModel = function() {
  $scope.listOfObjects = [{id: 4, name: "miss1"},
                          {id: 5, name: "miss2"},
                          {id: 6, name: "miss3"}];
  $scope.selectedItem = $scope.listOfObjects[1];
};

Answer 2

The other answers were correct in that it usually "just works." The issue was ultimately a mismatch between the organization key (an integer) stored inside $scope.organizations and the key as stored in the $http response, which is stored in JSON and therefore as a string. Angular was not matching the string to the integer. As I mentioned in my edit to the original question, the solution at the time was to cast the $http response data to a string. I am not sure if current versions of Angular.js still behave this way.