current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

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.

share|improve this question
    
The problem is the promise return. you must assign the promise response to $scope.Domains and then assign Domains[0] to CurrentDomain –  hutingung Jul 30 '14 at 1:27
    
Shouldn't the angular templating library handle promises transparently? My understanding was that in the html the promise can be treated the same as the underlying object. –  Lambo Jayapalan Jul 30 '14 at 1:33
    
But the problem is the second statement. $scope.CurrentDomain = $scope.Domains[0]; From the code, I think $scope.Domains is undefined and $scope.Domains[0] will throw error; –  hutingung Jul 30 '14 at 1:35
    
Ah, okay, I added that afterwards based on some other stackoverflow answers. Ideally, I'd think ng-init="CurrentDomain = Domains[0]" should handle the default selection. –  Lambo Jayapalan Jul 30 '14 at 1:36
    
which version of angularjs you are using? –  hutingung Jul 30 '14 at 1:41

1 Answer 1

up vote 0 down vote accepted

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.

share|improve this answer
    
That worked great, thanks! I'm still curious why the ng-init by itself didn't work, but your answer did resolve my issue. –  Lambo Jayapalan Jul 30 '14 at 1:55
    
Welcome. :). The problem is ng-init evaluate the expression before $scope.Domains resolved. same issue like $scope.CurrentDomain = $scope.Domains[0]; –  hutingung Jul 30 '14 at 2:02
    
@LamboJayapalan, I added explanation why ng-init not working in the answer. If earlier version of angularjs(*I not sure which), it should worked. It is recommended not to depends on directive to resolve promise –  hutingung Jul 30 '14 at 2:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.