[$rootScope:inprog] $apply already in progress

The error [$rootScope:inprog] $apply already in progress in AngularJS occurs when an attempt is made to call $apply() while AngularJS is already in the middle of an $apply() execution cycle. In simpler terms, it means that AngularJS is already processing a digest cycle, and you’re trying to start another one before the first one completes.

Step 1: Understanding the Digest Cycle and `$apply()`

In AngularJS, the digest cycle is responsible for checking and updating the view to reflect any changes in the scope. It’s triggered whenever a change is made to the scope that Angular needs to track and propagate to the view. The $apply() function is used to manually trigger the digest cycle.

When you call $apply(), AngularJS goes through the digest cycle to update all the watches on your scope and trigger the necessary view updates.

However, AngularJS doesn’t allow two digest cycles to run simultaneously. So, if one digest cycle is in progress, and you try to call $apply() again (or perform an action that causes AngularJS to initiate another $apply()), you’ll get the [$rootScope:inprog] $apply already in progress error.

Step 2: Common Causes of the Error

Nested $apply() Calls: The most common cause is making a $apply() call inside another $apply() or digest cycle. This can happen in certain asynchronous events, like callbacks or promises, where a second $apply() is attempted while the first is still running.
Use of $timeout or $interval: If you are using $timeout or $interval to trigger changes in your scope and also make $apply() calls, it can result in overlapping $apply() calls if not managed properly.
Manual Triggering of Digest Cycle in Non-Angular Context: If you update the scope from outside of AngularJS (e.g., using a third-party library, or a browser event like setTimeout, or custom event listeners), you might need to manually trigger the digest cycle using $apply(). However, if you call $apply() inside another $apply() cycle, this will result in the error.

Step 3: How to Fix the Error

1. Check for Nested `$apply()` Calls

If you’re calling $apply() inside a function that is already inside another $apply() or digest cycle, you need to make sure you’re not nesting $apply() calls.

For instance, if you have a $timeout function or a promise callback that calls $apply() like this:

$timeout(function() {
  $apply(function() {
    // code to update scope
  });
});

It can lead to nested $apply() calls. To fix this, you can check if a digest cycle is already in progress before calling $apply().

2. Using `$timeout` Instead of `$apply()`

In AngularJS, the $timeout service is designed to wrap around the JavaScript setTimeout and automatically trigger the digest cycle after executing a function. You can use $timeout instead of $apply() to avoid manual triggering of the digest cycle:

$timeout(function() {
  // code to update scope
});

This ensures that AngularJS knows about the changes and can process them in the next digest cycle, without triggering an error.

3. Check for Asynchronous Code (Promises, Events)

If you are working with promises, async calls, or any external code that might be modifying the scope, ensure that you are not manually calling $apply() during those operations if AngularJS is already processing changes.

For example, in a promise:

someAsyncFunction().then(function(response) {
  // Normally Angular will apply the changes automatically
  $scope.someProperty = response;

  // You don't need to call $apply() here
});

If you’re using an external asynchronous code like jQuery or vanilla JavaScript, and the code is updating the AngularJS scope, you should manually trigger the digest cycle with $scope.$apply().

someAsyncFunction().then(function(response) {
  $scope.$apply(function() {
    $scope.someProperty = response;
  });
});

But ensure you’re not calling $apply() multiple times inside another $apply() or digest cycle.

4. Use `$evalAsync` for Scheduled Scope Changes

AngularJS provides the $evalAsync() method to schedule the execution of an expression during the current digest cycle, without triggering another digest cycle. You can use $evalAsync() to make changes to the scope without causing nested $apply() calls.

$scope.$evalAsync(function() {
  // code to update scope
});

This ensures that the code inside the function is executed in the current digest cycle, but Angular will handle it appropriately and avoid the “already in progress” issue.

5. Handling Custom Event Listeners

If you have custom event listeners (like setTimeout, setInterval, or other native JavaScript events) that trigger changes to the scope, make sure that the $apply() call is made within Angular’s context. Use $scope.$apply() or $scope.$evalAsync() if you are handling events outside of AngularJS’s control.

setTimeout(function() {
  $scope.$apply(function() {
    $scope.someProperty = 'new value';
  });
}, 1000);

Step 4: Best Practices to Avoid This Error

Always Use $timeout for Asynchronous Updates: Whenever you need to update the scope asynchronously, prefer $timeout() over manually using $apply(). This will automatically trigger the digest cycle after the function executes.
Avoid Calling $apply() Inside Promises and Event Listeners: If you’re working with promises or event listeners, avoid calling $apply() unless absolutely necessary. AngularJS will often automatically trigger the digest cycle when the scope is updated.
Use $evalAsync When Appropriate: Use $evalAsync when you want to schedule updates for the scope that don’t require a full digest cycle.
Be Cautious of External Code: If you are using third-party libraries or plain JavaScript to update the AngularJS scope, be careful to trigger $apply() only if Angular is not already in the middle of a digest cycle.

Step 5: Debugging Tips

Check for $apply() Calls: Look through your code and find all instances where $apply() is used. Make sure that you aren’t nesting $apply() calls.
Use console.log() to Trace Digest Cycles: You can use console.log() to check when $apply() is being called and debug whether it’s being triggered multiple times inappropriately.
Inspect the Network Tab for External Calls: If you’re calling an external service or using external JavaScript libraries, use the browser’s developer tools to check for asynchronous behavior or errors during network requests.

Example of Code Fix:

// Bad practice: Calling $apply inside a $timeout
$timeout(function() {
  $apply(function() {
    $scope.someProperty = 'new value';  // This is redundant and can cause issues
  });
});

// Correct approach: Use $timeout without $apply
$timeout(function() {
  $scope.someProperty = 'new value'; // AngularJS will handle the digest cycle automatically
});

Step 1: Understanding the Digest Cycle and $apply()