title: Ionic different tab content
body: <p>I am trying to do a hybrid app using ionic with the structure that look like this:</p>
  
  <pre><code>#/app                 (sidemenu.html)
  #/app/noTabContent1   (notab-content1.html)
  #/app/noTabContent2   (notab-content2.html)
  #/app/tab1            (tab1.html)
  #/app/tab1/content1   (tab1-content1.html)
  #/app/tab1/content2   (tab1-content2.html)
  #/app/tab2            (tab2.html)
  #/app/tab2/content1   (tab2-content1.html)
  #/app/tab2/content2   (tab2-content2.html)
  </code></pre>
  
  <p>The problem is that, it seems like conflict between the tab page. For example, if I first visit <code>tab1</code> content page, then I go visit <code>tab2</code> content page later on, it will still display <code>tab1</code> content. If I visit <code>tab2</code> content page first, it will always display <code>tab2</code> content no matter how I try to access <code>tab1</code> content page.</p>
  
  <p>Why is it like that? Is my structuring wrong? Or, it is ionic bug? How can I overcome it?</p>
  
  <p>edit: Here's my example code for easier understanding:</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;!-- ionic/angularjs js --&gt;
      &lt;link href="http://code.ionicframework.com/1.1.0/css/ionic.css" rel="stylesheet"&gt;
      &lt;script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.js"&gt;&lt;/script&gt;
  
      &lt;!-- your app's js --&gt;
      &lt;!--&lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers.js"&gt;&lt;/script&gt;--&gt;
    &lt;/head&gt;
    &lt;body ng-app="starter"&gt;
      &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
  
      &lt;!-- MENU Template --&gt;
      &lt;script id="templates/menu.html" type="text/ng-template"&gt;
        &lt;ion-side-menus enable-menu-with-back-views="false"&gt;
    &lt;ion-side-menu-content&gt;
      &lt;ion-nav-bar class="bar-stable"&gt;
        &lt;ion-nav-back-button&gt;
        &lt;/ion-nav-back-button&gt;
  
        &lt;ion-nav-buttons side="left"&gt;
          &lt;button class="button button-icon button-clear ion-navicon" menu-toggle="left"&gt;
          &lt;/button&gt;
        &lt;/ion-nav-buttons&gt;
      &lt;/ion-nav-bar&gt;
      &lt;ion-nav-view name="menuContent"&gt;&lt;/ion-nav-view&gt;
    &lt;/ion-side-menu-content&gt;
  
    &lt;ion-side-menu side="left"&gt;
      &lt;ion-header-bar class="bar-stable"&gt;
        &lt;h1 class="title"&gt;Left&lt;/h1&gt;
      &lt;/ion-header-bar&gt;
      &lt;ion-content&gt;
        &lt;ion-list&gt;
          &lt;ion-item menu-close href="#/app/content1"&gt;
            Content 1
          &lt;/ion-item&gt;
          &lt;ion-item menu-close href="#/app/content2"&gt;
            Content 2
          &lt;/ion-item&gt;
          &lt;ion-item menu-close href="#/app/tab/content1"&gt;
            Tab 1 Content 1
          &lt;/ion-item&gt;
          &lt;ion-item menu-close href="#/app/tab/content2"&gt;
            Tab 1 Content 2
          &lt;/ion-item&gt;
          &lt;ion-item menu-close href="#/app/tab2/content1"&gt;
            Tab 2 Content 1
          &lt;/ion-item&gt;
          &lt;ion-item menu-close href="#/app/tab2/content2"&gt;
            Tab 2 Content 2
          &lt;/ion-item&gt;
        &lt;/ion-list&gt;
      &lt;/ion-content&gt;
    &lt;/ion-side-menu&gt;
  &lt;/ion-side-menus&gt;
  
      &lt;/script&gt;
  
      &lt;!-- Tab1 Template --&gt;
      &lt;script id="templates/tab1.html" type="text/ng-template"&gt;
        &lt;ion-tabs class="tabs-top tabs-color-active-positive"&gt;
  
    &lt;ion-tab title="Tab1 - Content1" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/app/tab/content1"&gt;
      &lt;ion-nav-view name="tab-Content"&gt;&lt;/ion-nav-view&gt;
    &lt;/ion-tab&gt;
  
    &lt;ion-tab title="Tab1 - Content2" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/app/tab/content2"&gt;
      &lt;ion-nav-view name="tab-Content2"&gt;&lt;/ion-nav-view&gt;
    &lt;/ion-tab&gt;
  
  &lt;/ion-tabs&gt;
      &lt;/script&gt;
  
       &lt;!-- Tab2 Template --&gt;
      &lt;script id="templates/tab2.html" type="text/ng-template"&gt;
        &lt;ion-tabs class="tabs-top tabs-color-active-positive"&gt;
  
    &lt;ion-tab title="Tab2 - Content1" href="#/app/tab2/content1"&gt;
      &lt;ion-nav-view name="tab2-Content"&gt;&lt;/ion-nav-view&gt;
    &lt;/ion-tab&gt;
  
    &lt;ion-tab title="Tab2 - Content2" href="#/app/tab2/content2"&gt;
      &lt;ion-nav-view name="tab2-Content2"&gt;&lt;/ion-nav-view&gt;
    &lt;/ion-tab&gt;
  
  &lt;/ion-tabs&gt;
      &lt;/script&gt;
  
       &lt;!-- Content1 Template --&gt;
      &lt;script id="templates/content1.html" type="text/ng-template"&gt;
        &lt;ion-view view-title="Content 1"&gt;
    &lt;ion-content&gt;
      &lt;h1&gt;Content 1&lt;/h1&gt;
    &lt;/ion-content&gt;
  &lt;/ion-view&gt;
      &lt;/script&gt;
  
      &lt;!-- Content2 Template --&gt;
      &lt;script id="templates/content2.html" type="text/ng-template"&gt;
        &lt;ion-view view-title="Content 2"&gt;
    &lt;ion-content&gt;
      &lt;h1&gt;Content 2&lt;/h1&gt;
    &lt;/ion-content&gt;
  &lt;/ion-view&gt;
      &lt;/script&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>// Ionic Starter App
  
  // angular.module is a global place for creating, registering and retrieving Angular modules
  // 'starter' is the name of this angular module example (also set in a &lt;body&gt; attribute in index.html)
  // the 2nd parameter is an array of 'requires'
  angular.module('starter', ['ionic'])
  
  .run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        cordova.plugins.Keyboard.disableScroll(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })
  
  .config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
  
      .state('app', {
      url: '/app',
      abstract: true,
      templateUrl: 'templates/menu.html',
      //controller: 'AppCtrl'
    })
  
      .state('app.tab', {
      url: '/tab',
      views:{
              'menuContent':{
                  templateUrl: 'templates/tab1.html'
              }
          }
    })
      .state('app.tab2', {
      url: '/tab2',
      views:{
              'menuContent':{
                  templateUrl: 'templates/tab2.html'
              }
          }
    })
  
  
    .state('app.content1', {
        url: '/content1',
        views: {
          'menuContent': {
            templateUrl: 'templates/content1.html'
          }
        }
      })
    .state('app.content2', {
        url: '/content2',
        views: {
          'menuContent': {
            templateUrl: 'templates/content2.html'
          }
        }
      })
    .state('app.tab.content1', {
        url: '/content1',
        views: {
          'tab-Content': {
            templateUrl: 'templates/content1.html'
          }
        }
      })
   .state('app.tab.content2', {
        url: '/content2',
        views: {
          'tab-Content2': {
            templateUrl: 'templates/content2.html'
          }
        }
      })
  
  .state('app.tab2.content1', {
        url: '/content1',
        views: {
          'tab2-Content': {
            templateUrl: 'templates/content1.html'
          }
        }
      })
   .state('app.tab2.content2', {
        url: '/content2',
        views: {
          'tab2-Content2': {
            templateUrl: 'templates/content2.html'
          }
        }
      })
  
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/app/content1');
  });
  </code></pre>
  
  <p><a href="http://codepen.io/anon/pen/LpVVOr?editors=101" rel="nofollow">http://codepen.io/anon/pen/LpVVOr?editors=101</a></p>