ionic one tab go to another tab's child page can't go back to another tab - ionic-framework

Question

ionic one tab go to another tab's child page can't go back to another tab
The problem: There's a button can go to state 'tab.settings.sub' in state 'tab.home' page, when first time I enter into state 'tab.home' , then click button to enter into state 'tab.setting.sub' but I can't go back to state 'tab.setting'.
<ion-nav-bar>
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="templates/tabs.html" type="text/ng-template">
<ion-tabs>
<ion-tab title="home" ui-sref="tabs.home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="settings" ui-sref="tabs.settings.index">
<ion-nav-view name="settings-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="home">
<ion-content>
<button class="button" ng-click="home.goSub()">settings/sub</ion-item>
</ion-content>
</ion-view>
</script>
<script id="templates/settings.html" type="text/ng-template">
<ion-view view-title="settings">
<ion-content>
<ion-item ui-sref="tabs.settings.sub">settings/sub</ion-item>
</ion-content>
</ion-view>
</script>
<script id="templates/sub.html" type="text/ng-template">
<ion-view view-title="settings/sub">
<ion-content>
welcome to settings/sub
</ion-content>
</ion-view>
</script>
The problem in http://codepen.io/piwinux/pen/BNYXKd
Thank you for help.

Answer 1

Okay the issue here is that you did not declared your "Home" tab abstract nor its substates in your MyConfig.js. In order to implement navigation in your "Home" tab you have to use the same pattern you have for the "Settings" tab:
tabs.home state with abstract: true and template: '<ion-nav-view></ion-nav-view>' to navigate in the tab.
tab.home.index initial route of your "Home" tab with templateUrl: 'templates/home.html'.
tab.home.nextRoute for the next route within "Home" tab using $state.go ('tabs.home.sub'); instead of $state.go ('tabs.settings.sub'); in your HomeCtrl to access it.
.state ('tabs', {
abstract: true,
url: '/tab',
templateUrl: 'templates/tabs.html'
})
.state ('tabs.home', {
abstract: true,
url: '/home',
views: {
'home-tab': {
template: '<ion-nav-view></ion-nav-view>',
controller: 'HomeCtrl as home'
}
}
}).state ('tabs.home.index', {
url: '',
templateUrl: 'templates/home.html'
})
.state ('tabs.home.sub', {
url: '/sub',
templateUrl: 'templates/sub.html'
})