1

I am attempting to bind a select control to an array using Angular JS. On the div containing the select I am calling a function using ng-init

<div id="refundformcontainer" ng-controller="RefundControl" ng-init="init()">

The init function calls a service which returns a list of countries and populates an array like this:

PossibleCountries: 
[  
    { 
        countryId: 32
        name: ARGENTINA
    }
    ,
    { 
        countryId: 40
        name: AUSTRIA
    }
    .
    .
    ,
    { 
        countryId: 858
        name: URUGUAY
    }
] 

I have the select control like this:

<select id="Country" ng-model="Voucher.country" ng-options="v.name for v in PossibleCountries"></select>

The select option is actually below a text input which is also bound using angular

<input type="text" id="vouchernumber" data-ng-model="Voucher.voucherNumber"/>

When the page loads the dropdown list is empty, but the array is correctly populated. However if I type anything into the above textbox it updates the dropdown list once the first character is typed.

Why is it not updating as soon as I populate the array, and how do I get it to do so?

1
  • Could you make a plnkr or fiddle? Commented Aug 26, 2013 at 12:43

1 Answer 1

2

Sounds like a typical outside-digest-cycle problem. Right after you get the countries make sure you call $scope.$apply(), or wrap the request (jQuery or whatever) around $scope.$apply(function() {....});

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.