title: Ionic / Angular ui-router -a href's returning wrong URL/content
body: <p>I have an Ionic tab menu which shows 4 items (the code below and codepen just have 2 items for clarity) and a "more" item which leads to further menu choices displayed as a list in an ion-content. It uses the Angular ui-router. I have two possibly connected issues.</p>
  
  <p><strong>Issue 1:</strong> at first the app appears to be working correctly but as you start to navigate around a few links (generally after visiting "more", the tabs will start to return incorrect URLS. For example:</p>
  
  <p>Stating at News > Contact > More > Sports > Contacts > News > More - <strong>breaks here,</strong> I see Contacts content instead of More content.</p>
  
  <p>I've add a console.log into each controller and in Chrome dev tools console, I can see that each tab click seems to lunch an extra event, e.g. clicking news tab means 'news' appears twice in the console. In addition, in the nav example above, the console shows that the contacts controller was launched when I clicked More.</p>
  
  <p><em>So to summarise, after some clicks around the app, the href targets seem to be sending me to the wrong place, like as if one had edited the code while it is running.</em></p>
  
  <p><strong>Issue 2:</strong> Up until the point where the nav breaks as described above, the back button works correctly for pages launched from the tabs, but for the pages launched from the "more" page (ie from the list) there is no back button.</p>
  
  <p>Sorry for all these beginner questions!</p>
  
  <p>Codepen : <a href="http://codepen.io/anon/pen/hBpfa" rel="nofollow">http://codepen.io/anon/pen/hBpfa</a></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;link href="lib/ionic/css/ionic.css" rel="stylesheet"&gt;
      &lt;link href="css/style.css" rel="stylesheet"&gt;
  
  
      &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
    &lt;body ng-app="schoolApp"  animation="slide-left-right-ios7"&gt;
  
      &lt;ion-nav-bar class="bar-stable nav-title-slide-ios7 bar-positive"&gt;
        &lt;ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back"&gt;
          Back
        &lt;/ion-nav-back-button&gt;
      &lt;/ion-nav-bar&gt;
  
      &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
  
    &lt;script id="tabs.html" type="text/ng-template"&gt;
    &lt;ion-tabs class="tabs-icon-top"&gt;
  
      &lt;ion-tab title="News" icon="icon ion-ios7-paper-outline SS-tab-icon" href="#/tab/news"&gt;
        &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
      &lt;/ion-tab&gt;
  
      &lt;ion-tab title="Contact" icon="icon ion-ios7-telephone SS-tab-icon" href="#/tab/contact"&gt;
        &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
      &lt;/ion-tab&gt;
  
      &lt;ion-tab title="More" icon="icon ion-navicon-round SS-tab-icon" href="#/tab/more"&gt;
        &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
      &lt;/ion-tab&gt;
  
    &lt;/ion-tabs&gt;
    &lt;/script&gt;
  
    &lt;script id="more_tab_contents.html" type="text/ng-template"&gt;
    &lt;ion-view title="{{title}}"&gt;
      &lt;ion-content class="has-header padding"&gt;
  
        &lt;div class="list"&gt;
          &lt;a nav-clear class="item item-icon-left" href="#tab/info"&gt;
            &lt;i class="icon ion-ios7-information SS-tab-icon"&gt;&lt;/i&gt;
            Information
          &lt;/a&gt;
          &lt;a nav-clear class="item item-icon-left" href="#tab/pictures"&gt;
            &lt;i class="icon ion-camera SS-tab-icon"&gt;&lt;/i&gt;
            Pictures
          &lt;/a&gt;
          &lt;a nav-clear class="item item-icon-left" href="#tab/sport"&gt;
            &lt;i class="icon ion-ios7-football-outline SS-tab-icon"&gt;&lt;/i&gt;
            Sports
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/ion-content&gt;
  
    &lt;/ion-view&gt;
    &lt;/script&gt;
  
    &lt;script id="inside.html" type="text/ng-template"&gt;
      &lt;ion-view title="{{title}}"&gt;
        &lt;ion-content class="has-header padding"&gt;
             &lt;div class="SS_inside_content"&gt;
                &lt;h1&gt;{{title}}&lt;/h1&gt;
  
                &lt;ol&gt;
                &lt;li&gt;In faucibus condimentum libero, vel iaculis nibh tristique ac. Nunc vitae urna felis. Praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. &lt;/li&gt;
               &lt;li&gt;In faucibus condimentum libero, vel iaculis nibh tristique ac. Nunc vitae urna felis. Praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. &lt;/li&gt;
               &lt;li&gt;In faucibus condimentum libero, vel iaculis nibh tristique ac. Nunc vitae urna felis. Praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. &lt;/li&gt;
                &lt;li&gt;In faucibus condimentum libero, vel iaculis nibh tristique ac. Nunc vitae urna felis. Praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. &lt;/li&gt;
               &lt;li&gt;In faucibus condimentum libero, vel iaculis nibh tristique ac. Nunc vitae urna felis. Praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. &lt;/li&gt;
               &lt;li&gt;In faucibus condimentum libero, vel iaculis nibh tristique ac. Nunc vitae urna felis. Praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. &lt;/li&gt;
                &lt;li&gt;In faucibus condimentum libero, vel iaculis nibh tristique ac. Nunc vitae urna felis. Praesent lectus ligula, vulputate id dolor at, porttitor pretium nulla. &lt;/li&gt;
                 &lt;/ol&gt;
           &lt;/div&gt;
       &lt;/ion-content&gt;
      &lt;/ion-view&gt;
    &lt;/script&gt;
  
    &lt;script id="" type="text/ng-template"&gt;
    &lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>App.js:</p>
  
  <pre><code>var schoolApp = angular.module('schoolApp', ['ionic'])
  
  
  
  schoolApp.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
  
  
     // setup an abstract state for the tabs directive
      .state('tab', {
        url: "/tab",
        abstract: true,
        templateUrl: "tabs.html"
      })
  
     .state('tab.news', {
        url: '/news',
        templateUrl: 'inside.html',
        controller: 'newsCtrl'
      })
  
  
     .state('tab.contact', {
        url: '/contact',
        templateUrl: 'inside.html',
        controller: 'contactCtrl'
      })
  
  
  
   .state('tab.info', {
        url: '/info',
        templateUrl: 'inside.html',
        controller: 'infoCtrl'
      })
  
  
  .state('tab.pictures', {
        url: '/pictures',
        templateUrl: 'inside.html',
        controller: 'picturesCtrl'
      })
  
  .state('tab.sport', {
        url: '/sport',
        templateUrl: 'inside.html',
        controller: 'sportCtrl'
      })
  
  
  .state('tab.more', {
        url: '/more',
        templateUrl: 'more_tab_contents.html',
        controller: 'moreCtrl'
      })
  
    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/tab/news');
  
  });
  
  
  
  schoolApp.controller('infoCtrl', function($scope) {
    $scope.title="Information";
    console.log ( 'info' );
  })
  
  
  
  schoolApp.controller('newsCtrl', function($scope) {
    $scope.title="Latest News";
    console.log ( 'news' );
  })
  
  
  
  schoolApp.controller('contactCtrl', function($scope) {
    $scope.title="Contacts";
    console.log ( 'contact' );
  })
  
  
  
  schoolApp.controller('picturesCtrl', function($scope) {
    $scope.title="Pictures";
    console.log ( 'pics' );
  })
  schoolApp.controller('sportCtrl', function($scope) {
    $scope.title="Sports";
    console.log ( 'sport' );
  })
  
  schoolApp.controller('moreCtrl', function($scope) {
    $scope.title="Further content choices";
    console.log ( 'more' );
  });
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>Further to discussions with @SjoerdDeWit and looking at the Ionic codepen examples, I have reverted to using named views, which I had done before. However before I was loading my "more" content into the tab view for News  - now I'm loading everything from the more page, and the pages it links to, into the named view for that tab - I think this is the way Ionic intend it to be done. So, as you click/tap "more" you get extra menu choices, the choose them and all the time you are still within the more tab, it is still active. Is this the way it should be?</p>
  
  <p>One thing I notice. if I go to 'more', then 'sport' (within more) - then go to one of the other tabs, then back to more, I get sport, then tap more again and get the more menu options.</p>
  
  <p>A log on each state controller shows (for a different sequence than above but same idea):</p>
  
  <pre><code>news named_views.js:96 (Launch of app)
  contact named_views.js:100
  more named_views.js:104
  more &gt; pics named_views.js:114
  news named_views.js:96
  more &gt; pics named_views.js:114 FIRST TAP OF MORE - REVISIT IT
  more named_views.js:104 TAP IT AGAIN
  </code></pre>
  
  <p>Revised index.html - just updates shown</p>
  
  <pre><code>  &lt;script id="tabs.html" type="text/ng-template"&gt;
    &lt;ion-tabs class="tabs-icon-top"&gt;
  
      &lt;ion-tab title="News" icon="icon ion-ios7-paper-outline SS-tab-icon" ui-sref="tab.news"&gt;
          &lt;ion-nav-view name="news-tab"&gt;&lt;/ion-nav-view&gt;
      &lt;/ion-tab&gt;
  
      &lt;ion-tab title="Contact" icon="icon ion-ios7-telephone SS-tab-icon" ui-sref="tab.contact"&gt;
        &lt;ion-nav-view name="contact-tab"&gt;&lt;/ion-nav-view&gt;
      &lt;/ion-tab&gt;
  
      &lt;ion-tab title="More" icon="icon ion-navicon-round SS-tab-icon" ui-sref="tab.more"&gt;
        &lt;ion-nav-view name="more-tab"&gt;&lt;/ion-nav-view&gt;
      &lt;/ion-tab&gt;
  
    &lt;/ion-tabs&gt;
    &lt;/script&gt;
  
    &lt;script id="more_tab_contents.html" type="text/ng-template"&gt;
    &lt;ion-view title="{{title}}"&gt;
      &lt;ion-content class="has-header padding"&gt;
  
        &lt;div class="list"&gt;
          &lt;a nav-clear class="item item-icon-left" ui-sref="tab.info"&gt;
            &lt;i class="icon ion-ios7-information SS-tab-icon"&gt;&lt;/i&gt;
            Information ui-sref
          &lt;/a&gt;
          &lt;a nav-clear class="item item-icon-left" ui-sref="tab.pictures"&gt;
            &lt;i class="icon ion-camera SS-tab-icon"&gt;&lt;/i&gt;
            Pictures
          &lt;/a&gt;
          &lt;a nav-clear class="item item-icon-left" ui-sref="tab.sport"&gt;
            &lt;i class="icon ion-ios7-football-outline SS-tab-icon"&gt;&lt;/i&gt;
            Sports
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/ion-content&gt;
  
    &lt;/ion-view&gt;
    &lt;/script&gt;
  </code></pre>
  
  <p>Revised javascript:</p>
  
  <pre><code>var schoolApp = angular.module('schoolApp', ['ionic'])
  
  
  
  schoolApp.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
  
     // setup an abstract state for the tabs directive
      .state('tab', {
        url: "/tab",
        abstract: true,
        templateUrl: "tabs.html"
      })
  
  
     .state('tab.news', {
        url: '/news',
        views: {
          'news-tab': {
            templateUrl: 'inside.html',
            controller: 'newsCtrl'
          }
        }
      })
  
  
  
     .state('tab.contact', {
        url: '/contact',
        views: {
          'contact-tab': {
            templateUrl: 'inside.html',
            controller: 'contactCtrl'
          }
        }
      })
  
  
  
     .state('tab.more', {
        url: '/more',
        views: {
          'more-tab': {
            templateUrl: 'more_tab_contents.html',
            controller: 'moreCtrl'
          }
        }
      })
  
  
  
  
   .state('tab.info', {
        url: '/info',
        views: {
          'more-tab': {
            templateUrl: 'inside.html',
            controller: 'infoCtrl'
           }
        }
      })
  
  
  
  .state('tab.pictures', {
        url: '/pictures',
        views: {
          'more-tab': {
            templateUrl: 'inside.html',
            controller: 'picturesCtrl'
           }
        }
      })
  
  .state('tab.sport', {
        url: '/sport',
        views: {
          'more-tab': {
            templateUrl: 'inside.html',
            controller: 'sportCtrl'
           }
        }
      });
  
  
    $urlRouterProvider.otherwise('/tab/news');
  
  }); // end config
  
  
  
  
  schoolApp.controller('newsCtrl', function($scope) {
    $scope.title="Latest news";
    console.log('news');
  })
  schoolApp.controller('contactCtrl', function($scope) {
    $scope.title="Contact us";
    console.log('contact');
  })
  schoolApp.controller('moreCtrl', function($scope) {
    $scope.title="More (tabs overflow)";
    console.log('more');
  })
  
  schoolApp.controller('infoCtrl', function($scope) {
    $scope.title="Information";
    console.log('more &gt; info');
  })
  
  schoolApp.controller('picturesCtrl', function($scope) {
    $scope.title="pictures";
    console.log('more &gt; pics');
  })
  schoolApp.controller('sportCtrl', function($scope) {
    $scope.title="Sports";
    console.log('more &gt; sports');
  });
  </code></pre>