Angular.js Rendering Slowly in IE

misc4_bgRecently while working on an Angular.js application, I learned that the maximum number of bindings you would want on a single angular page is 2000.  This translates into watches directly.

Here’s a script to determine the current number of watches in your application (source):

function getWatchers(root) {

     root = angular.element(root || document.documentElement);

     var watcherCount = 0;

     function getElemWatchers(element) {

          var isolateWatchers = getWatchersFromScope($isolateScope);

          var scopeWatchers = getWatchersFromScope($scope);

          var watchers = scopeWatchers.concat(isolateWatchers);
          angular.forEach(element.children(), function (childElement) {

               watchers = watchers.concat(getElemWatchers(angular.element(childElement)));


          return watchers;


     function getWatchersFromScope(scope) {

          if (scope) {

               return scope.$$watchers || [];

          } else {

               return [];



     return getElemWatchers(root);



This won’t directly affect creating new items in a page (like adding a row to a table) but it will affect overall page performance. For example, scrolling will be slow and jagged, or navigating to a different page will take a long time.

Side note: In Tracker’s item search, when displaying 25 items (each with 15 columns), it has over 6000 watches!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s