Dynamically changing the Angular $scope variables

Question

I have two arrays (scope variables) whose values are getting updated dynamically, but in the HTML when I am trying to print their values, the view is not taking the updated ones.

<div>
    <!-- array printing -->
    <span ng-repeat="var in array track by $index">{{var}}</span>
</div>
<div>
    <!-- array -->
    <span ng-repeat="var in array2 track by $index">{{var}}</span>
</div>

When I am printing the values in the console log, the array is changing but its changes are not getting reflected in the page.

controller.js

$scope.update = function() {

    $scope.array.push(box); 

    // inside an ajax call
    var index = $scope.array.indexOf(box);

    if(index > -1) {
        $scope.array.splice(index,1);
        console.log("index "+index);
    }  
}

Answer 1

It seems that your Ajax call is not being called by AngularJS. Maybe you're using jQuery?

In this case, try using $scope.$apply(); after the end of the Ajax callback function. It will verify any changes and update your view variables.

You can read more about $apply here and here .