$scope.$apply throwing exception...$scope.apply already in progress

Question

I'm trying to update my view based on the changes that I've made to my $scope variables in the middle of the digest for that after making the required changes to my variables i'm calling $scope.$apply(), which is actually causing an exception saying $scope.$apply already in progress. Can someone help me how to resolve this issue.

this.showCart = false;

/*This function is called from the view on a ng-click*/
this.addCart=function(){

        if (this.showCart === false) {
            this.showCart = true;
            this.hideEmptyCart = 'none';
            this.showFullCart = 'initial';
            this.searchRightMargin = 40;
            this.updateWidth();
            $scope.$apply();
        }
}

This error is informing you that the $scope.$apply is already in progress. You don't need to call it explicitly. Can you post some code? — Corey
Thanks Corey for the response, I've updated the post with some code. — Ajay Srikanth
You don't need to call $scope.$apply(). Just take it out and everything should work. — David says Reinstate Monica
If I do that I don't see the updates happening right there, my cart is basically hidden. When I click an item to add to cart it should first shoe the cart and then the item should be added to the cart. I've an animation to fly the item on the cart, since my cart is hidden initially my item is being thrown to somewhere else on the screen instead of the cart for the first item, subsequent items works well. Do you know what can be done to resolve this. — Ajay Srikanth

Corey Corey · Accepted Answer · 2015-03-30T22:00:40

Looking at your code, your problem is probably with the scope reference. Your this reference outside the function is scoped to the controller while your this reference inside the function is scoped to that function. Try changing everything to $scope:

$scope.showCart = false;

/*This function is called from the view on a ng-click*/
$scope.addCart=function(){
    if ($scope.showCart === false) {
        $scope.showCart = true;
        $scope.hideEmptyCart = 'none';
        $scope.showFullCart = 'initial';
        $scope.searchRightMargin = 40;
        $scope.updateWidth();
    }
}

Then, call your function from ng-click:

<button ng-click="addCart()">Add To Cart</button>

UPDATE

Alternatively, you could try holding a reference to the controller as self:

var self = this;
self.showCart = false;

/*This function is called from the view on a ng-click*/
self.addCart=function(){
    if (self.showCart === false) {
        self.showCart = true;
        self.hideEmptyCart = 'none';
        self.showFullCart = 'initial';
        self.searchRightMargin = 40;
        self.updateWidth();
    }
}

$scope.$apply throwing exception...$scope.apply already in progress

1 Answers