Angular.js memory leak with ngRepeat according to survey

Question

I have what seems like a memory leak in my angular.js application. Basically, a page consists of a table of information that is updated every five seconds from the JSON-encoded result of an AJAX call. I created a simplified version of jsfiddle here: http://jsfiddle.net/alalonde/TtGXW/6/

Controller:

function HostController($scope, $timeout, Data) { $scope.encoders = Data.load(); $scope.refreshInterval = 5; $scope.reload = function () { $scope.encoders = Data.load(); }; $timeout(function doReload() { $scope.reload(); $timeout(doReload, $scope.refreshInterval * 1000); }, 5000); } 

Template excerpt:

 <table class="table table-striped table-bordered" ng-controller="HostController"> <tr> <th>Status</th> <th>... </tr> <tr ng-repeat="enc in encoders"> <td> <div>{{ enc.name }}</div> <div ng-show="enc.version"> v{{ enc.version.major }}.{{ enc.version.minor }}-{{ enc.version.rev }} <span ng-show="enc.version.user">- {{ enc.version.user }}</span> </div> </td> </tr> </table> 

When using a heap snapshot in Chrome every minute or so, memory usage increases every time. I applied Igor Minar to my local angular.js ( https://github.com/angular/angular.js/commit/bd524fc4e5fc0feffe85632a7a6560da6bd9b762 ), which helped a lot, but memory usage still creeps up inexorably.

Any tips on using Chrome's memory profiler with angular.js would be appreciated.

Answer 1

I had the same memory consumption issue when I was polling for data and used ng-repeat to iterate over it and display the rows.

When I used the “item in items”, my memory usage increased, but when I used the “item in items track by $ index”, the memory usage was stable and the GC cleared properly.