ionic-angular multiple nested and abstract states

Question

I have been working on an application which requires 2 abstract states with nested states, below is the sample configuration

$stateProvider
 .state('app', {
  url: "/app",
  abstract: true,
  templateUrl: "templates/menu.html",
  controller: "AppController"
 })
 .state('app.screenList', {
  url: "/app/screenList",
  views: {
   'menuContent': {
   templateUrl: "templates/screenList.html",
   controller: "ScreenListController"
   }
  }
 })
 .state('app.screen1', {
  url: "/app/screen1",
  views: {
   'menuContent': {
   templateUrl: "templates/screen1.html",
   controller: "Screen1Controller"
   }
  }
 })
 .state('app.subapp', {
  url: "/app/subapp",
  abstract: true,
  views: {
   'menuContent': {
   templateUrl: "templates/subapp.html",
   controller: "SubAppController"
   }
  }
 })
.state('app.subapp.screen1', {
  url: "/app/subapp/screen1",
  views: {
   'subappContent': {
   templateUrl: "templates/subappscreen1.html",
   controller: "SubAppScreen1Controller"
   }
  }
 })

The screenList state displays list of screens to chose. When following navigation happens, everything works fine

screenList > screen1 Press back key and then subapp.screen1

Pressing back at this stage works.

Interestingly, when I try to perform following navigation the back stops to respond and nothing happens.

screenList > screen1 Press back key and then subapp.screen1 Press back key and then again subapp.screen1 (At this stage pressing back key has no effect. Even the app doesn't exit.)

I am totally clueless as why it is happening, the only conclusion I arrived at is, if I consecutively try to get into the subapp.screen1, the problem arises. If I keep switching between subapp.screen1 and screen1, everything works properly.

I want the back key should respond no matter how the state has been switched.

Answer 1

Based on this post, I finally made things work.

In tabs.html I declare a tab like this:

  <ion-tab title="ServOOps Mobile" icon="ion-person-stalker" ui-sref="app.tabs.external-index">
<ion-nav-view name="tab-servicos"></ion-nav-view>

And in app.js, I put like this:

.state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
})

  .state('app.tabs', {
  url: "/tabs",
  views: {
    'menuContent': {
      templateUrl: "templates/tabs.html"
    }
  }
})

.state('app.tabs.external-index', {
    url: '/external-index',
    views: {
        'menuContent': {
            templateUrl: 'templates/external-index.html',
            controller: 'ExternalIndexCtrl'
        },
        'tab-servicos': {
          templateUrl: 'templates/external-index.html',
          controller: 'ExternalIndexCtrl'
        }
    }
})

And this works just fine. Now I have my side menu and my tabs on this page.

You have to replay this for the other tabs.

And remember, in this I link the external-index to the tabs, so now, the link to the page will be #/app/tabs/external-index.html.