AngularJS memory leak

[acajic]

After reading some of the issues like
#8483
and
#4864
I could not figure out if it is appropriate to open a new issue. Nevertheless, this one was important for me so I created a separate repository on Github where I created a small project that demonstrates my problem.

I am not an expert in AngularJS nor in Javascript, so it is very possible that I am doing something terribly wrong here.
The project is here:
https://github.com/acajic/memory-leak-demo

There are 2 pages in this project.
Page 1

By pressing the "details" button on one of the listed items, page 2 get loaded.

Page 2

By pressing "back" button, page 1 gets loaded again.

One must merely repeat the following procedure:

1. Press "details" button
2. Wait for item to load (when values for "id" and "name" appear)
3. Press "back" button
4. Wait for items in a list to load

And the memory grows indefinitely.

In the project there is a "services" folder which contains only one file - "serverService.js". In that file, line 9:
var testWithServer = true;

Set this value to false if my server is no longer operational when you run this code.

My tests are the following:

1. With "var testWithServer = true;"

First column represents the number of times I repeated the procedure of pressing "Details" and then pressing "Back". The second column shows the memory usage of my site read from the TaskManager in Windows. I am using Chrome.

0 19900 K
10 24564 K
20 26808 K
30 30412 K
40 32628 K
50 40768 K

It is important to mention that the increase in memory usage only happens when performing the page switching. When I first opened the "list" page, I let it be for half a minute and the memory usage was standing still between [19880 K, 19920 K].
I performed the same "pause" in activity after every round of 10 repetitions. The memory usage is stable when I am not switching pages.

2. With "var testWithServer = false;"

Here, repetitions can be done much quicker because no communication with server is happening. Memory growth seems slower but this is probably because different data is being manipulated.

0 19952 K
40 23848 K
60 27352 K
80 34852 K
100 35176 K
120 36108 K
140 39720 K
160 47468 K
180 50032 K
200 53112 K
220 53188 K
240 53568 K
260 51200 K

In my real project this manifests in a way that when the first page is displayed, app uses about 60mb of memory. The first time I enter the "details" view, memory usage rises to 100mb. On second iteration to 150mb. Then 180, 200, 210...
In the begining memory consumption rises uniformly, but later it jumps up and down, but the general trend is still rising.

As I said, if this is not a bug, I apologize and I will gladly move it to StackOverflow where this example can teach other AngularJS beginners.

[caitp]

How are you measuring this? I'm not seeing that kind of memory growth with the heap measurements in the timeline (Chrome 37.0.2062.94 (Official Build 290621), OSX 10.9.4, Updated repro to use Angular 1.3 rc0 + jQuery 2.1.1) --- what I'm seeing is that it does grow when clicking links, but drops back down after a few moments

[acajic]

I was using Windows Task Manager.

When I use Chrome timeline, I see the drop eventually but I cannot witness this drop in Task Manager.
In my real app, when I use Chrome timeline drop in memory usage also happens.
But my app starts it consumes ~90mb, and with me switching pages it rises 150, 180, 190, 200, 220 up to 370mb before it drops back to 90mb. I don't suppose it is something I should be worried about?

If it's ok, I would like this issue to be opened for a few more days so I can run more tests...

[guisouza]

I think if it always drops back to the initial value there is no memory leak.

[jeffbcross]

This seems like a duplicate of #3543, no? Known memory issue, which folks from Chakra are aware of.