AngularJS UI Router: Not registering history state when navigating to tabs

Question

I have an Angular app that uses Angular UI Routing to provide states. The basic routing between pages works.

The app has multiple pages, and one of those pages has tabs. When I navigate to the page, I get a nice animation, and the back button appears in the header.

But when I navigate to the tabs page, the back button doesn't appear and there is no animation to the page. Is it possible to get an animation when I navigate to the page that has tabs, and to have the back button appear?

UPDATE: Made a new example that better shows what I mean: http://plnkr.co/edit/jKII2S3uEnEOVDy9WBA2?p=preview

Answer 1

look into this - http://ionicframework.com/docs/angularjs/controllers/view-state/

The View Service is leveraged by the Ionic's tabs directive, which has child tab directives. Each tab requires its own history stack (forward and back buttons), and to do so each tab has its own navView directive. This system is similar to what you see in modern apps, such as iOS's App Store, or Android's Play Store.

each tab within tabs has it's own history stack, therefor your nav-bar history is reset when you enter a tab for the first time. it is managed with a $historyId value on the scope of the directive. maybe you can work around that with the use of these value.