Angularjs select default when loading remotely

Question

I'm trying to have a default value in a SELECT element using angular, and it doesn't seem to be working. No matter what I do, it always selects a blank default element, when the data is loaded remotely in the controller

Here's my HTML:

<select 
ng-options="Domain.Name for Domain in Domains"
ng-model="CurrentDomain"
ng-init="CurrentDomain = Domains[0]"
></select>

Here's the relevant controller code:

$scope.Domains = $resource('api/domain').query();
$scope.CurrentDomain = $scope.Domains[0];

I realize that this question has been asked many times, and I've read all other questions, but none of the suggestions seem to work. If anyone has any other suggestions, please let me know.

Thanks.

Answer 1

The problem is the promise. $scope.Domains is promise and pending to resolve. So, $scope.Domains[0] is undefined at that point of time.

So, the correct code is as below

var Domains = $resource('api/domain').query(function(){
    $scope.Domains = Domains;
    $scope.CurrentDomain = Domains[0];
});

Plunkr version - http://plnkr.co/edit/ppjSWDKT4lHWvEcY0PMC?p=preview

Refer to https://github.com/angular/angular.js/issues/4298, ng-init is no longer able to resolve promise.