Re-using the same state in multiple views (tabs)


Hi everyone. First of all, we’re finding Ionic to be amazingly helpful, many thanks to anyone working on it.

Secondly, and this is more of an AngularJS question, I’m wondering if it’s possible (or advisable) to reuse the same state for multiple tabs in an Ionic view.

I’ve modified the standard Tab history Codepen here to explain what I’m trying to do:

In this example there are two tabs, Home and About, which both allow the user to transfer to the ‘tabs.navstack’ state. I’m trying to set up the navstack state in app.js as being linked with both views, like this:

    .state('tabs.navstack', {
  url: "/navstack",
  views: {
    'about-tab': {
      templateUrl: "templates/nav-stack.html"
    'home-tab': {
      templateUrl: "templates/nav-stack.html"

I would hope that this means that, regardless of the tab I’m in, if I click into the Navstack view, the appropriate tab will remain highlighted and I’ll get a back button to come back out of it.

Instead the following happens:

  • (Bad) If you click on Navstack from Home, the About tab gets highlighted and there is no back button
  • (Good) If you click on Navstack from About, the About tab gets highlighted and the back button appears

My real-life use case for this is a “Message” state that is accessible both from an “Inbox” state and a “Outbox” state. I know I could make two separately named states with the same controller and template and link to them appropriately from my Inbox and Outbox views, but I feel like I should be able to do this using the above method.

Not sure if I’m getting my syntax wrong or if this is just a totally incorrect way to solve this problem. All suggestions gratefully received.


For anyone stumbling across this question, I believe it’s answered here: Creating shared routes in different views

Answer: No - it can’t be done and the workaround is to create a duplicate view using the same controller and template.


Thanks for sharing! :wink: