1

I have a select2 drop down list that is bound to a data in my scope ($scope.makes). It Is "living" inside an ng-modal.

I update $scope.makes inside a promise, which is a Parse.com call (parse.cloud.run) but after that it is over the DDL is not refershed with the new data. But if I add the call of $scope.$digest() it is working. Why is that?

This is the modal controller's relevant part:

    Parse.Cloud.run('getCarMakes', {}, {
        success: function (results) {
            console.log('C');
            if (results===undefined){
                console.log('The query has failed');
                return;
            }
            for (var i=0;i<results.length;i++){
                $scope.makes.push(results[i]);
            }
            $scope.$digest();

If i remove the last line - the dropdown list is not being refreshed.

Here's the HTML part of the Modal that is relevant

<label class="control-label" for="MakeSelect">Make </label>
<select class="form-control col-md-2" id="MakeSelect" name="make" ui-select2 ng-model="carDetails.make">
    <option ng-repeat="make in makes" value="{{ make }}">{{ make}}</option>
</select>
slashms
  • 928
  • 9
  • 26

1 Answers1

1

That's because success is out of Angular's scope, you need to explicitly tell Angular that something was updated it must run $digest or $apply(which internally calls $digest) to update it's scope too.

Angular will account for only those model changes which are done inside AngularJS’ context, it has no idea about callback and can't update itself, as it would if change was inside it's scope.

For more information on how you should tell Angular to update it's scope, with $digest() or $apply() read this article or this question $apply vs $digest in directive testing.

Community
  • 1
  • 1
Lev
  • 3,719
  • 6
  • 41
  • 56