How to get Angular to update collection after ajax get

Question

I've been playing with Angular and I'm trying to get it to work with updating a list from a jQuery promise. If I create the array restaurantItems array with the objects filled out from the very start, then it works as expected, but when I do a push with a callback, then it doesn't seem to ever see the items I add. I've debugged through the code and I know everything is being called with the values I would expect, but the actual view is never being updated. I tried $watch/$watchCollection, but either I did it incorrectly, or I misunderstood. Here is my code as it is now.

export class Controller {
    public static $inject = [
        '$scope',
        '$location'
    ];
    constructor(private $scope:IActiveOrderController, private $location:ng.ILocationService) {
        $scope.restaurantItems = [];
        var test = function(x)
        {
            debugger;
            for (var i = 0; i < x.length; i++) {
                $scope.restaurantItems.push(x[i]); // Verified this does actually push the correct object on the array.
            }
        };
        ActiveOrderRepository.getActiveOrderItemsForActiveOrder(1).done(test);
    }
}

Answer 1

$watchCollection is working fine with me.

You mention you are using jQuery promise if you are using third party library in angular. Angular may not know $scope is updated.

you should use $scope.$apply.

for example

$.get(...).then(function(data){
$scope.$apply(function(){
    $scope.data = data
})
})