Setting Dynamic objects to null after use increasing the heap size

I was trying to make a web application with lots of JS code fast & efficient.

There are some dynamic objects which collect data in a loop and then are looped over to display somewhere else.
I explicitly set all these objects to null after their corresponding displaying loop has been terminated like:

loop executed over tempCatObj
tempCatObj = null; //after the loop is over

On using Memory tab of Chrome Developer tools,I noticed the heap size now shows more than the case before.

i.e

Head SnapShot(using Chrome Developer Tool)(profile A)

without setting null: 7.8 MB
After setting to null : 8 MB

Another profiling(profile B):

On Sampling Allocation Profile(stats of a custom function formDisplayGrid inside which the objects were set to null)

    without setting null: 279048 bytes 58.56%
    After setting to null : 98520 bytes 31.54%

both these results seem to be contradicting each other.

I was expecting profile A to show smaller data size in case of objects being set to null as that seems to be freeing up space which seem to be happening in profile B.

An assumption was also that setting dynamic objects would be helpful for the Garbage Collector to clean up.

Is this the correct way of analysis?

Garbage collection only every 3th cycle

In my AngularJS 1.5 app, I’ve discovered a very strange memory behavior.

I set up a very simple test:
An almost empty template being state 1 (using Angular ui-router) which only forwards to state 2.
The template for state 2 is filled with a rather large dummy table by an array inside the scope.
In the controller:

$scope.foodahoo = [];
            for(var i = 0; i < 300; i++) {
                var obj = {};
                for(var j = 0; j < 50; j++) {
                    obj['prop' + j] = 'value' + j;
                }
                $scope.foodahoo.push(obj);
            }

In the template:

{{key}}: {{value}}

Expected memory behavior: on state 1, heap starts at a low level, goes up when I go to state 2, goes down to the same low level when going back to state 1 and so forth - regardless how often I repeat that cycle.

However, the actual behavior is like so (recorded in Chrome Dev Tools):

enter image description here

Marked in red are state changes from state 1 to state 2.
It seems like at the beginning memory is simply added without being garbage collected in between. However, then, every third cycle, right in the middle of loading the state, Chrome thinks: "Oops, I consume too much memory, let's do free some garbage."
However, even then, the heap doesn't reach the level it had at the starting point (at state 1).

Replacing $scope with this and controller as ... has no effect: the result is the same. Whereas, putting in plain HTML shows normal behavior.

So, my questions are:
Is this just a Chrome quirk? Or normal browser behavior? Or do I actually have a general memory problem with my `$scope'? If yes: How can I investigate this further? Heap profile comparison didn't give me any insights yet.

Garbage collection only every third cycle

In my AngularJS 1.5 app, I’ve discovered a very strange memory behavior.

I set up a very simple test:
An almost empty template being state 1 (using Angular ui-router) which only forwards to state 2.
The template for state 2 is filled with a rather large dummy table by an array inside the scope.
In the controller:

$scope.foodahoo = [];
            for(var i = 0; i < 300; i++) {
                var obj = {};
                for(var j = 0; j < 50; j++) {
                    obj['prop' + j] = 'value' + j;
                }
                $scope.foodahoo.push(obj);
            }

In the template:

{{key}}: {{value}}

Expected memory behavior: on state 1, heap starts at a low level, goes up when I go to state 2, goes down to the same low level when going back to state 1 and so forth - regardless how often I repeat that cycle.

However, the actual behavior is like so (recorded in Chrome Dev Tools):

enter image description here

Marked in red are state changes from state 1 to state 2.
It seems like at the beginning memory is simply added without being garbage collected in between. However, then, every third cycle, right in the middle of loading the state, Chrome thinks: "Oops, I consume too much memory, let's do free some garbage."
However, even then, the heap doesn't reach the level it had at the starting point (at state 1).

Replacing $scope with this and controller as ... has no effect: the result is the same. Whereas, putting in plain HTML shows normal behavior.

So, my questions are:
Is this just a Chrome quirk? Or normal browser behavior? Or do I actually have a general memory problem with my `$scope'? If yes: How can I investigate this further? Heap profile comparison didn't give me any insights yet.