Lightning talk about making Angular apps that deal with lots of data fast
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

brian talks about angular with lots of data

This is my lightning talk about performance considerations for Angular apps displaying lots of data.

It starts with a simplified explanation of $digest and then gives a few examples of how to apply this knowledge to cases when you're repeating over a bunch of elements.

Measure things

Make sure you know what's slow. Lots of tools that can help.

I'm not going to talk about them.

What factors are important?

What causes slowness?

DOM manipulation

Angular is pretty good at helping you with this. In some special cases you can write your own directive to manipulate the DOM and improve performance.

dynamic things

The number of "dynamic things" your user sees. This is called the number of $watchs.

Counting Dynamic Things

What adds a $watch?

Consider the following chunk of an app:


  <div ng-repeat="item in items">{{}}</div>

Here's a list of the things Angular $watchs for updates:

// angular figures this out based on directives, which add `$watch`s
var thingsThatMightUpdate = [
  $scope.getThing(), // invoke this each time

  // from ngRepeat
  $scope.items[0], // obj refs

  // from {{}} inside ngRepeat
  $scope.items[0].name, // values

Digest cycle

This is a simplification (cuz lightning talk). The documentation on scopes have the full story.

// map thingName to value
var oldValues = {
  '$scope.thing': 'hello',
  '$scope.items.length': 4,
  /* ... */

function digest () {
  var thingsThatChanged;
  do {
    thingsThatChanged = [];

    thingsThatMightUpdate.forEach(function (thing) {
      if (oldValue[thingName] !== $scope[thingName]) {
        oldValue[thingName] = $scope[thingName];

    // trigger `$watch`s, updating the DOM, etc

  } while(thingsThatChanged.length > 0);

Note that we have to eval $scope.getThing() on each digest. If getThing() is slow, then all your digests are slow.

If you have a bunch of things in the array, the digest will be slow.

tl;dr – watch fewer things, keep $watchs fast.

How to reduce expensive watches


Transform the data before binding

Rather than use filters/functions in your bindings, transform the data before binding to it.



angular.module('mySlowApp', []).controller('MyController', [
  '$scope', '$http', function ($scope, $http) {

    // this has like a million elts
    $http.get('all-the-things.json').success(function (data) {
      $ = data;

    $scope.transform = function (item) {
      // do something expensive
      return item;


<div ng-repeat="item in data">{{transform(}}</div>



angular.module('myFastApp', []).controller('MyController', [
  '$scope', '$http', function ($scope, $http) {

    // this has like a million elts
    $http.get('all-the-things.json').success(function (data) {
      $ =;

    function transform (item) {
      // do something expensive
      return item;


<div ng-repeat="item in data">{{}}</div>

How to watch fewer things

Here are a few strategies.


ngRepeat over a subset of the things.


angular.module('myApp', []).controller('MyController', [
  '$scope', function ($scope) {

    // this has like a million elts
    $scope.bigArray = [ /* ... */ ];

    $ = 0;

    $scope.$watch('page', function (index) {
      $scope.littleArray = $scope.bigArray.slice(index, index + 5);



  <div ng-repeat="item in littleArray">{{}}</div>
  <button ng-click="page -= 1">prev</button>
  <button ng-click="page += 1">next</button>

You can use a similar strategy but with infinite/virtual scrolling.

You know the data is populated once

Coming to 1.3 Soon

3rd Party Modules

You know the data is populated occasionally

Opt out of data binding; use event listeners.

In your controller:

angular.module('myApp', []).controller('MyController', [
  '$scope', '$interval', '$http', function ($scope, $interval, $http) {

    // refresh every 10 seconds
    $interval(function () {
      // this has like a million elts
      $http.get('all-the-things.json').success(function (data) {
        $scope.$broadcast('dataUpdated', data);
    }, 10000);


In your directive:

  link: function (scope, elt) {
    scope.$on('dataUpdated', function (ev, data) {
      // do DOM manipulation


Angular makes the 95% case fast, but gives you the tools to take control of your own performance destiny when you want to.