I've got what seems to be a memory leak in my angular.js app. Basically, the page consists of a table of information that is updated every five seconds from the JSON-encoded result of an AJAX call. I've created a simplified jsfiddle version here: http://jsfiddle.net/alalonde/TtGXW/6/
The 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);
}
A snippet of the template:
<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 taking a heap snapshot in Chrome every minute or so, the memory usage rises slightly each time. I've applied Igor Minar's fix to my local angular.js (https://github.com/angular/angular.js/commit/bd524fc4e5fc0feffe85632a7a6560da6bd9b762) which helped a lot, but the memory usage is still inexorably creeping up.
Any hints on using the Chrome memory profiler with angular.js would be appreciated.
I had the same issue with memory consumption when I was polling for data and using ng-repeat to loop over it and render the rows.
When I used "item in items" I got ever increasing memory usage but when I used "item in items track by $index" the memory usage was stable and the GC cleaned up properly.