TAB like navigation inside a tab (<ion-tab>)


I’m trying to do lateral navigation inside a tab (please look at the attached image).

Basically I have a tabbed application. In one of the tabs there is a ion-nav-view (green area), which can be populated by content depending on the selection of the button-bar in the subheader of the ion-tab.

The problem is that when I navigate between STATE A and STATE B. One of the states keeps getting recreated (this is a problem because there is some data which I don’t want to keep reloading.

Upon investigation the history via $ionicHistory. I found that there are two cases:

  1. Suppose you went from A(1st visit), to B(1st visit) previously. If you then try and go to A again, you can simply use $ionicHistory.goBack() to go back to A(2nd visit). The cached view will be returned.
  2. Following from 1, if you previously went from A(1st visit) to B(1st visit) then to A(2nd visit using goBack) again. If you then try to go to B(2nd visit), you would have to go to the forwardView. Which I’m finding it hard to do.

You can either solve my issue, by helping me how to go to a cached forwardView, or by suggesting a different way of achieving the desired navigation.

N.B. the desired navigation is as follows:
1st level. Tabs (which are obviously working)
2nd level. Inside one pf the tabs have a nested nav-view which you can navigate using a button-bar.

If you are using an iphone (iOS9+) take a look at the same pattern on the Music app.

Cached Views not reloaded when navigating back: $ionicHistory.goBack()

Here is an image of the iOS music app which has the same pattern.
Within the selected “My Music” tab you can select between “Library” and “Playlists”.