(simple plunkr demo here )
SUMMARY:
There is a leak using ng-repeat after the second wave, iterating over the "array" of user objects, such as:
<div ng-repeat="d_sampleObject in mySampleObjects"> {{d_sampleObject.description}} </div>
The memory profile shows the optional "d_sampleObject" remaining, not canceled. Details (via the controller and the injected service) below. A simple demo is also in the plunkr link provided. Any thoughts and help are greatly appreciated in advance!
NOTE: "mySampleObjects" is an array of the following instances:
ml.MySampleObject = function (id) { this.id = id; this.description = 'this is object #:' + ' '+id; }
DETAILS:
I have a custom object model that reflects the business domain objects that we use in our AngularJS application. I found that when I pass an instance of one of my user objects to ng-repeat, the link is stored in it (I think Angular) and the memory is not freed. This happens in the second “wave” (click refresh) ng-repeat, since it repeats the iteration over an array of objects. This leak appears in my Profile tests (in Chrome). Here is a brief example in plunkr. Click the Refresh button once (or more) to see an additional instance of the d_sampleObject that has leaked (in Chrome Profile Inspection). Please note: the name 'd_sampleObject' is used only when it is passed to ng-repeat. I have included screenshots of an instance of an additional object ("d_sampleObject"), which further seeps below. Why is there a leak and how can it be avoided?
(Note, I found that if I do not iterate over my collection of objects (JS array) through the object, but rather through a primitive index ("integer"), no leakage occurs. I use the object reference as a result of ng-repeat repetitions)
SIMPLE HTML:
<!DOCTYPE html> <html ng-app="memoryleak"> <head> <meta charset="utf-8" /> <title>Memory Leak Test</title> <script>document.write('<base href="' + document.location + '" />');</script> <script data-require=" angular.js@1.3.x " src="https://code.angularjs.org/1.3.13/angular.min.js" data-semver="1.3.13"></script> <script src="app.js"></script> <script src="dataservice.js"></script> </head> <body ng-controller="MainCtrl"> <div ng-repeat="d_sampleObject in mySampleObjects"> {{d_sampleObject.description}} </div> <br> <button ng-click="redo()">Number of refreshes: {{numRedos}}!</button> </body> </html>
SIMPLE APP.JS
(function(ml) { var app = angular.module('memoryleak',['servicemodule']); app.controller('MainCtrl', ['$scope', 'dataservice', function($scope, dataservice) { $scope.redo = function () { $scope.numRedos++; $scope.mySampleObjects = dataservice.myObjectCollection; dataservice.redo(); } $scope.redo(); }]); }(window.MEMLEAK = window.MEMLEAK || {}));
SIMPLE dataservice.js
(function(ml) { 'use strict'; var serviceModule = angular.module('servicemodule',[]); serviceModule.factory('dataservice', ['$rootScope', '$http', function ($rootScope, $http) { this.myObjectCollection = []; this.redo = function () { this.numRedos++; // that.myObjectCollection = []; this.myObjectCollection.length = 0; for (var i = 0; i < 10; i++) { var sampleObject = new ml.MySampleObject(i); that.myObjectCollection.push(sampleObject); } sampleObject=null; } ml.MySampleObject = function (id) { this.id = id; this.description = 'this is object #:' + ' '+id; } return this; //return the entire service to make methods accessible to dependents }]); }(window.MEMLEAK = window.MEMLEAK || {}));
SCREENSHOT 1: (FIRST PAGE SETTING - created 10 'mySampleObjects') 
SCREENSHOT 2: (CLICKED ON REFRESH - there is the 11th mySampleObject created / skipped with reference to the instance name 'd_sampleObject' passed to ng-repeat.)