Preserve state of each route


How do i get to preserve the state of each route, even if I navigate to a different one just like bootstrap tabs.

I want my page to retain the state even after switching routes, it should start fresh only on reload. How can I do something like that? Some ideas please.


I might be wrong, but I believe that if you’re navigation from one route to another, then it should automatically reuse instances of route objects. What are you trying to preserve?


Yeah! Sorry I should make it even more clearer.

Eg: Lets say I have two tabs, Home and Profile


In the home tab, I want to create multiple(lets say 7) sub tabs with text area by clicking New tab and write something on to it. I should be able to switch between the sub tabs which is of different url.

Question: If I switch to Profile tab and came back, will all my 7 tabs with text area and values in it will be there?

Like you said it should reuse the instance of route object, wanted to know a possible idea on implementing this.


I don’t know the full detail of this. Maybe JSBin a prototype?

No matter what is preserved, you might still want to persist the data in local storage so the users doesn’t lose their input.


Yeah, I should make the jsbin and put it here,


The controller persists between route loads, so if you stash the activeTab on the ProfileController then when you come back to the profile it should show the same tab selected.


@vysakh0 Was this resolved? I am running into the same issue.