Too many watchers slowing down the app

In AngularJS, each ng-model, ng-repeat, ng-if, and ng-show creates a watcher that Angular evaluates during the digest cycle. When an application has too many watchers, performance degrades, making the app sluggish.

This guide will help you identify, debug, and optimize watcher-related performance issues step by step.

---

1. Why Too Many Watchers Slow Down an AngularJS App?

AngularJS continuously monitors data bindings through its digest cycle.

• When a watcher count is too high (e.g., 2000+), performance drops because Angular re-evaluates each watcher in every cycle.
• This leads to UI lag, high CPU usage, and slow page rendering.

---

2. How to Detect the Number of Watchers?

To check how many watchers exist in your app, run this in the browser’s Developer Console (F12 > Console):

function () {
    var totalWatchers = 0;
    var checkWatchers = function (element) {
        if (angular.element(element).scope()) {
            totalWatchers += angular.element(element).scope().$$watchers ? angular.element(element).scope().$$watchers.length : 0;
        }
        angular.forEach(element.children, function (child) {
            checkWatchers(child);
        });
    };
    checkWatchers(document.body);
    console.log("Total Watchers: ", totalWatchers);
})();

Why This Works?

• It recursively counts all active watchers in the app.
• If the number is above 2000, optimization is required.

---

3. Common Causes of High Watcher Counts

Issue	How It Creates Too Many Watchers?
ng-repeat with large lists	Each row in ng-repeat creates new watchers
ng-show / ng-hide	Uses watchers to track visibility changes
ng-if	Destroys and recreates DOM elements, creating new watchers
$watch functions	Too many custom $watch() calls increase watchers
Filters inside ng-repeat	Each filter creates additional watchers
Two-way binding (ng-model)	Every ng-model field adds watchers

---

4. Optimizing and Reducing Watchers

Solution 1: Use track by in ng-repeat

If ng-repeat is used on large lists, it can create thousands of watchers.

Incorrect Usage (Too Many Watchers)

<div ng-repeat="user in users">
    {{ user.name }}
</div>

Correct Usage (track by user.id)

<div ng-repeat="user in users track by user.id">
    {{ user.name }}
</div>

Why This Works?

• Prevents Angular from creating duplicate watchers for unchanged elements.

---

Solution 2: Use One-Time Binding (::) Where Possible

If the data does not change after initialization, use one-time binding to remove watchers.

Incorrect Usage (Unnecessary Watchers)

<h1>{{ pageTitle }}</h1>

Correct Usage (:: One-Time Binding)

<h1>{{ ::pageTitle }}</h1>

Why This Works?

• Removes the watcher after the value is set initially.

---

Solution 3: Use ng-if Instead of ng-show/ng-hide

• ng-show/ng-hide keeps elements in the DOM and only changes visibility (keeps watchers alive).
• ng-if removes the element entirely from the DOM, reducing watchers.

Incorrect Usage (ng-show Keeps Watchers)

<div ng-show="isVisible">Content</div>

Correct Usage (ng-if Removes Unused Elements)

<div ng-if="isVisible">Content</div>

Why This Works?

• ng-if removes the element and its watchers when not needed.

---

Solution 4: Remove Unnecessary $watch Functions

Too many $watch() functions slow down the digest cycle.

Incorrect Usage (Too Many Manual $watch Calls)

$scope.$watch("user.name", function (newValue) {
    console.log("User name changed:", newValue);
});

Correct Usage (Use One-Time Binding or $watchGroup)

$scope.$watchGroup(["user.name", "user.age"], function (newValues) {
    console.log("User data changed:", newValues);
});

Why This Works?

• $watchGroup() reduces multiple watchers into one.

---

Solution 5: Use Pagination for Large Lists

If ng-repeat renders thousands of items, paginate the list.

Example: Paginate List in Chunks

<div ng-repeat="user in users | limitTo: 10">
    {{ user.name }}
</div>
<button ng-click="loadMore()">Load More</button>

$scope.users = [...];  // Assume a large dataset
$scope.loadMore = function () {
    $scope.limit += 10;
};

Why This Works?

• Renders only 10 items at a time, reducing watchers.

---

Solution 6: Debounce ng-model for Input Fields

Each ng-model triggers a watcher. If used in fast-typing inputs, it can slow performance.

Incorrect Usage (Many Watchers Created on Every Keystroke)

<input type="text" ng-model="searchQuery">

Correct Usage (ng-model-options with Debounce)

<input type="text" ng-model="searchQuery" ng-model-options="{ debounce: 500 }">

Why This Works?

• Delays model updates (by 500ms), reducing unnecessary digest cycles.

---

Solution 7: Destroy Watchers When Not Needed

Manually remove watchers when they’re no longer needed.

Example

var unwatch = $scope.$watch("data", function (newValue) {
    console.log("Data changed:", newValue);
});

// Remove the watcher when done
$scope.$on("$destroy", function () {
    unwatch();
});

Why This Works?

• Prevents watchers from persisting after component destruction.