CODEWITHSUNDEEP
angularjs
Neil
Neil

Reputation: 2749

dropdown list bound to array using AngularJS not updating instantly when array is populated

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?

Upvotes: 1

Views: 3079

Answers (1)

Alejandro Pedraza
Alejandro Pedraza

Reputation: 537

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() {....});

Upvotes: 2

Related Questions