AngularJs - ng-options not binding after ajax call

Question

I try to change the selected index of ng-options after ajax call, but it won't change.

//Html Section...

<select id="fooId" ng-model ="foo.formula"
   ng-options="formulas as name for (formulas, name) in the_formula"></select>

//End Html Section...


//js file...

//get list of formula from server...
TheSource.Get.then(function(response){
    $scope.the_formula = response.the_formula;
});


//do something awesome, then..
//binding data from server...

TheData.Get.then(function(response){
    //binding the data to view...
    //all of the element is binding, except the ng-options part..
    $scope.foo = response; 

    //not working..
    //$scope.formula = response.formulaId //it is return integer ID like (1, 2, 3, etc..)
});

// End js file...

And this is the data that send by My API.

{ 
   "the_formula":{
     "123":"formula1",
     "124":"formula2"
   }
}

What's wrong? How To Automatically change selection in ng-options?

Blasted

You have ng-options="...in the_formula", then $scope.The_Formula = ..., then $scope.formula = .... Are these meant to refer to the same variable? It should be spelled the same, case sensitively. – Terryterrye

Whoops, sorry edit mistake. but it's working in actual code. – Blasted

Answer 1

@reptildarat

Hello,

I too was stuck in the same situation when I was working with select and ng-option. :)

What you will have to do-

Set the value of "foo.formula" after the data in retrieved from the ajax call and binding is done. Reason- When the Html is being rendered. It binds "foo.formula" in the select tag. At that time there is no items populated. After sometime the items are populated from behind (js) and no trigger is fired for that ng-model.

After a lot of effort I found this-

Example-

Here is what you need to do in js.

   .success(function (data) {  
            $scope.$emit('HideLoading');  
            $scope.departments = data.DepartmentsGetResult;  
            $scope.selectedDepartment = item.DepartmentId;  

Here is my HTML-

<select   
   data-ng-model="selectedDepartment"   
   data-ng-options="dept.DepartmentId as dept.Title for dept in departments" >  
 </select>  

Hope this will help.
Let me know your concerns.
:)

Androus

Hi, Still No Luck..I though it is because promises, but it's not. so it must be about the data that i use. I updated the questions with the data that I use. Hopefully you can help. – Blasted

Don't bind it with - ng-model ="foo.formula". Try binding it with - ng-model ="selectedformula". – Androus

function call in ng-change takes the same value ng-model, so the above solution doesn't work when you use ng-change for selecting other values. ng-model="selectedOption" ng-change="itemSelected(selectedOption)", this doesn't work. – Galatia

Answer 2

After http call, make $scope.selectedOption = options[0]

This could be more specific solution when you use ng-change.

<select ng-model="selectedOption" class="form-control" ng-change="metaTypeSelected(selectedOption)">
    <option 
        ng-selected="{{selectedOption}}" 
        ng-repeat="selectedOption in options track by $index"
        value="{{selectedOption}}">
        {{selectedOption}}
    </option>
</select>

use selectedOption in ng-model, ng-repeat and ng-change

Galatia