Return to root state when selecting a tab

Hi there.

Let’s say my app is built around this state tree:


    .state('tab') //abstract state

    .state('tab.section1')  //root state of my section 1 tab
        .state('tab.section1-subsection') //a sub-state of section 2

    .state('tab.section2')  //root state of my section 2 tab
        .state('tab.section2-subsection') //a sub-state of section 2

Now, if I navigate to 'tab.section1-subsection', then tap on tab2, and finally tap on tab 1 again, I am brought back to 'tab.section1-subsection'.

What I’d like to do is, whenever I tap on a tab, I am always brought to the tab’s root state and not to the sub-state I was on when I left the section.

Is that possible?

Thanks for reading,

Up,maybe I should add a bit of information that might help.

Here’s my tab-bar template:

   <!-- Accounts Tab -->
   <ion-tab title="Accounts" icon-off="ion-filing" icon-on="ion-filing" href="#/tab/accounts">
       <ion-nav-view name="tab-accounts"></ion-nav-view>


   <!-- Other Tab -->
   <ion-tab title="Other Tools" icon-off="ion-more" icon-on="ion-more" href="#/tab/other">
       <ion-nav-view name="tab-other"></ion-nav-view>

So, if I navigate to #/tab/accounts/sub-accounts, then to another section (#/tab/other for example) and finally click on the “Accounts” tab again, the app brings me back to #/tab/accounts/sub-accounts.

However, what I want is that when I click on the “Accounts” tab, I am brought to the root state, hence #/tab/accounts.

How do I do that?


I would like to know this also.

Come on, don’t tell me this is not possible or has not been thought before…

This article from @aaronksaunders might help :

@Calendee: thanks for the link.

So that’s what II feared, there no simple way to do it, you need a some kind of a hack. But in my case, there’s too many tabs and substates and it would take me ages to do.

I’m going to open an issue because I think this feature should be integrated in the framework.

Ok, I finally found a simple solution.

I just replaced the href attribute with an ng-click calling a function. This function simply uses a $state.go method pointing to the proper root-state. This way it always redirects to the exact state and not one of its sub-state.

To make it flexible enough you simply pass in the state’s string name in the function, so every <ion-tab> will have something like ng-click="goTo('tab.tab1')" and the function itself would look like this:

$scope.goTo = function(args) {
    $state.go(args, {}, {
        reload: true,
        inherit: false,
        notify: true

@tomatoKetchup I see how that wold work but where do you put that function so it available to call. It seems to me that it would need to be defined in every controller, what PITA.

I also ran into this and my solution was ‘clear history’:

$scope.$on(’$ionicView.beforeEnter’, function (event, viewData) {

While working with Ionic for the first time one of the areas I found most difiicult is to get the view navigation system to do what I want. This inlcudes menus, tabs nested withing menus, title bars shwoing back buttons when they shouldn’t and the other way around, and so on. For every problem there’s a workaround but as a beginner I found it difficult.

By the way, to reduce code repetition in my controllers I use Base Controllers from which I can inherit/reuse functionality (using prototypal inheritance). This has worked great for me.

1 Like

@wilblack In my app I use the <ion-tabs> directive built-in with Ionic. If you have the same, all you need to do is to add the attribute ng-controller="myController" inside that <ion-tabs> and then you define that controller in your app.js for example.

I tried the same solution but it didn’t wok for me.

I created new post before I found this thread…

Details: How To Force to Root State When Tab is Pressed?

Any Suggestion?


Just add ui-sref=“tab.accounts” (assuming the state name is tab.accounts) to the tab tag, it will go to the root of the tab.

I too am facing the same issue. Still using Ionic v1 too. Could you elaborate on your solution? What href did you replace? Also, could you explain exactly what the $scope.goTo function is doing…is it wiping out the history, resetting the stack…or??? I might need a little hand holding on this one. Thanks in advance.

Where were you adding the ui-sref="tab.accounts" at? in the app.js .state definitions or in the template html?

I added the ui-sref="" to my tab tag and it does not work.

  <!-- Settings Tab -->
  <ion-tab title="Menu" class="icon" icon-off="ion-ios-gear custom-icon-off" icon-on="ion-ios-gear" ui-sref="" href="#/tab/menu">
    <ion-nav-view name="tab-menu"></ion-nav-view>

And it did not work…then I tried again removing the href…not only did it not work, but when removing the href and using ui=sref by itself, it is auto adding the href back into the tag:

  <!-- Settings Tab -->
  <ion-tab title="Menu" class="icon" icon-off="ion-ios-gear custom-icon-off" icon-on="ion-ios-gear" ui-sref="">
    <ion-nav-view name="tab-menu"></ion-nav-view>

Results in adding the href back:  
<ion-tab  class="icon" icon-off="ion-model-s custom-icon-off" icon-on="ion-model-s" ui-sref="" href="#/tab/menu"></ion-tab>