AngularJS "$digest already in progress" Error: Diagnosis, Fixes, and Escalation

Problem Statement

When an AngularJS application throws the "$digest already in progress" exception, the UI may freeze or show incomplete updates. This error indicates that a $digest cycle (the internal loop that processes $watch expressions) was started while another cycle was still running.

Recognizable Symptoms

• Console error: TypeError: $digest already in progress (often followed by … at $rootScope.$apply)
• Partial or no UI changes after a user action or async event
• Occasional UI stalls that disappear after a page refresh
• In automated tests, occasional flaky failures without visible test errors until console output is captured

Root Cause Analysis

The error arises when $apply or $digest is invoked while $rootScope.$$phase is already set to "$digest" or "$apply". Common triggers include:

• Direct $apply calls inside $watch callbacks, $timeout, $http responses, or directive link functions that are executed during a digest.
• Custom directives that call $apply inside their link or controller logic when the directive is compiled as part of a larger digest.
• Nested component loading where the framework automatically starts a digest for each compiled component.

Diagnostic Checklist

1. Check the console for the exact error message. Note the stack trace; it often points to a custom $apply call.
2. Inspect $rootScope.$$phase at the time of the error. Add console.log('$rootScope.$$phase', $rootScope.$$phase); near the suspected $apply call.
3. Locate any direct $apply or $digest calls. Search the codebase for $apply usage, especially inside callbacks or directive link functions.
4. Determine if the call is inside a digest. If $rootScope.$$phase is truthy, you are already in a digest.
5. Identify async triggers. Look for $http, $timeout, $interval, or event listeners that may invoke $apply after the digest has begun.

Ordered Fixes

1. Replace direct $apply with $evalAsync or $applyAsync. These schedule the update for the next digest or batch multiple updates, preventing reentrancy.

   // Bad
   $scope.$apply(() => { $scope.value = newValue; });
   
   // Good
   $scope.$evalAsync(() => { $scope.value = newValue; });
   

2. Use $rootScope.$applyAsync for global updates. This defers the digest until the current call stack unwinds.

   $rootScope.$applyAsync(() => { $rootScope.global = data; });
   

3. Wrap risky code in try/catch and log $$phase. This helps confirm that the digest was already in progress.

   try {
     $scope.$apply();
   } catch (e) {
     console.warn('Digest already in progress', e);
   }
   

4. Avoid calling $apply inside $watch callbacks. Instead, use $evalAsync or move the logic outside the watch.
5. For directives, use link or controller functions that schedule updates asynchronously. Example:

   link: function(scope, element) {
     element.on('click', () => {
       scope.$evalAsync(() => { scope.clicked = true; });
     });
   }
   

Verification Steps

1. Reproduce the error. Add a $timeout(() => $scope.$apply(), 0) inside a controller that is bound to a view. Open the console and confirm the error appears.
2. Apply the fix. Replace the direct $apply with $evalAsync.
3. Re-run the scenario. Verify that the console no longer shows the error and the UI updates normally.
4. Use Chrome DevTools Performance tab. Record a digest cycle before and after the fix. Confirm that no nested $digest calls occur after the change.

Escalation Criteria

• If the error persists after refactoring all direct $apply calls, the issue may stem from a third‑party library that triggers AngularJS internally. Check the library’s documentation for AngularJS compatibility notes.
• When the application is large and the error appears intermittently, consider instrumenting $rootScope.$$phase globally to capture all digest starts and ends, and analyze the stack traces to locate hidden triggers.
• In a CI environment, enable console error capturing in the test runner (e.g., Karma). Treat any console error as a test failure to surface hidden digest reentrancy.

Limitations and Caveats

• AngularJS 1.x is end‑of‑life; future projects should migrate to Angular (2+). This guide applies only to existing AngularJS 1.x codebases.
• Replacing $apply with $evalAsync may delay UI updates by a micro‑tick. For critical real‑time interactions, validate that the delay is acceptable.
• Some legacy code may rely on the synchronous nature of $apply. In those cases, a careful review of the surrounding logic is required before refactoring.

Practical Checklist for Engineers

Step	What to Do	Why It Matters
1	Search for $apply in callbacks	Direct calls inside callbacks are the most common culprit.
2	Replace with $evalAsync	Schedules update after current digest, preventing reentrancy.
3	Add console.log('$rootScope.$$phase') around suspect code	Immediate visual confirmation of digest state.
4	Run the app and monitor console errors	Ensures the fix is effective.
5	Record performance to confirm no nested digest cycles	Verifies complete elimination of the issue.

Conclusion

The "$digest already in progress" error is a symptom of re‑entrant digest cycles. By systematically locating direct $apply calls inside digest‑aware contexts and replacing them with $evalAsync or $applyAsync, you can restore stable UI updates and eliminate the error. Use the provided diagnostic steps to confirm the fix and avoid regressions in future code changes.