title: AngularJS app freezes when loading in new data to $scope
body: <p>This is probably a difficult question to answer as I'm not sure what the root problem is here, would appreciate if someone would take a look though.</p>
  
  <p><a href="http://threadfinder.net/search%3FnameTags=jacket/0" rel="nofollow">http://threadfinder.net/search%3FnameTags=jacket/0</a></p>
  
  <p>If you continually scroll down, more items are loaded in using <a href="http://binarymuse.github.io/ngInfiniteScroll/" rel="nofollow">ngInfiniteScroll</a> and this function:</p>
  
  <pre><code>$scope.moreProducts = function() {
          if ($scope.busy || $scope.noMore){return;}
          else 
          if (!($scope.busy)) {
              $scope.busy = true;
              $scope.itemsLoaded += 27;
              var theQuery = $routeParams.query.replace(/\?|%3f/gi, '');
              $scope.itemSearch.get({
                  query: theQuery,
                  page: $scope.itemsLoaded
              }, function(data) {
                  if (data.posts.length &lt;= 0) {
                      $scope.noMore = true;
                  } else {
                      $scope.noMore = false;
                      for (var i = 0; i &lt; data.posts.length; i++) {
                          if ($scope.user) {
                              if (!($scope.user.likes.indexOf(data.posts[i]._id) === -1)) {
                                  data.posts[i].liked = 'http://i.imgur.com/CcqoATE.png';
                              } else {
                                  data.posts[i].liked = 'http://i.imgur.com/tEf77In.png';
                              }
                              $scope.posts.push(data.posts[i]);
                          }
                      }
                      $scope.busy = false;
                  }
              });
          }
      }
  </code></pre>
  
  <p>(I'm using <a href="https://github.com/akoenig/angular-deckgrid" rel="nofollow">AngularJS Deckgrid</a> for the tile layout, but I've tried disabling it and there is no big change in performance.)</p>
  
  <p>If you keep scrolling, after you get to ~300 items loaded on the page performance starts to take a hit and the app freezes while new items are being loaded into scope. </p>
  
  <p>I understand that perhaps it's just a fact that loading in all this data takes a big load on the page - with every 27 items loaded in (one infiniteScroll <code>GET</code> call) the total weight of the data being loaded in is about 30kb a pop, so at around 300 items there's ~900kb of data in scope. This data is as little as I can make it (~500 lines of JSON).</p>
  
  <p><strong>The question is:</strong></p>
  
  <p>Are there any recommendations, plugins, directives or best-use practices for AngularJS for when loading a lot of data in the page <code>$scope</code>? </p>
  
  <p>For clarification, the app is built on <code>Node</code>/<code>ExpressJS</code>/<code>MongoDB</code></p>
  
  <p>EDIT: I've checked out this issue on two computers (both on OSX) and this issue is <strong>MUCH</strong> more prevalent in Chrome than in Safari. Chrome totally staggers when loading in the data, Safari is really smooth and only has any noticable lag when you get to 600+ items and even then it's nowhere near as bad as Chrome. </p>