What happens exactly in AngularJS when page refreshes?

Question

I was wondering what exactly happens to data, scopes, caches (and other Angular concepts I might not know of yet) in Angular, when you manually refresh the page.

Context

I have a tree-like hierarchical data, that is generated from flat array in a service and rendered in a view by using recursive ng-template and ng-repeat. Each route in my app has different tree based on parameter (but generated from the same array).

Problem

When I display tree first time, it renders fine. Then, I select other route and generate tree for it, also fine. If I then go back and select first route, few unnecessary elements are rendered in the view (I checked if tree i generated was flawed but it's correct). If I repeat this action few times i get error:

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!

When I see corrupted view (with unnecessary elements) and refresh the page, it renders fine. After I checked that passed data is correct, I thought that propably some internal Angular buffer or cache gets filled up during the recursive rendering and it doesn't get emptied when I switch between views.

Question/s

• What exactly is emptied in Angular when you refresh the page?
• How can you empty only relevant cache in my case?

Answer 1

What exactly is emptied in Angular when you refresh the page?

AngularJS is a JavaScript framework.

Like in native JS, everything is emptied when you refresh your page.

If you want to save values between refreshes, you have to use a browser storage system.

There are several posts about this topic:

• How to get JS variable to retain value after page refresh?
• Keep a JavaScript variables value after a page refresh?
• retain angular variables after page refresh