title: State instantiation confusion amongst siblings
body: <p>I have example done in Ionic and UI-Router but I don't think this is a problem with Ionic but more on UI-Router specific.</p>
  
  <p>I always assumed that <strong>if switching state at the same level of hierarchy (siblings), the controller won't get reloaded in any case</strong> unless you switch out to other branches. Look like I am wrong.</p>
  
  <p>Here is an example: <a href="http://codepen.io/hawkphil/pen/GJxgvE?editors=101" rel="nofollow">http://codepen.io/hawkphil/pen/GJxgvE?editors=101</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>  &lt;ion-nav-bar class="bar-positive"&gt;
      &lt;ion-nav-back-button class="button-icon ion-arrow-left-c"&gt;
      &lt;/ion-nav-back-button&gt;
    &lt;/ion-nav-bar&gt;
  
    &lt;ion-nav-view&gt;&lt;/ion-nav-view&gt;
  
  
    &lt;script id="templates/tabs.html" type="text/ng-template"&gt;
      &lt;ion-tabs class="tabs-icon-top tabs-positive"&gt;
  
        &lt;ion-tab title="Home" icon="ion-home" href="#/tab/home"&gt;
          &lt;ion-nav-view name="home-tab"&gt;&lt;/ion-nav-view&gt;
        &lt;/ion-tab&gt;
  
        &lt;ion-tab title="About" icon="ion-ios-football" href="#/tab/about"&gt;
          &lt;ion-nav-view name="about-tab"&gt;&lt;/ion-nav-view&gt;
        &lt;/ion-tab&gt;
  
        &lt;/ion-tab&gt;
  
      &lt;/ion-tabs&gt;
    &lt;/script&gt;
  
    &lt;script id="templates/home.html" type="text/ng-template"&gt;
      &lt;ion-view view-title="Home"&gt;
        &lt;ion-content class="padding"&gt;
          &lt;p&gt;
            &lt;a class="button icon ion-home" href="#/tab/home"&gt; Home&lt;/a&gt;
            &lt;a class="button icon icon-right ion-chevron-right" href="#/tab/fact1"&gt;
              Fact1
            &lt;/a&gt;
            &lt;a class="button icon icon-right ion-chevron-right" href="#/tab/fact2"&gt;
              Fact2
            &lt;/a&gt;
            &lt;a class="button icon icon-right ion-chevron-right" href="#/tab/fact3"&gt;
              Fact3
            &lt;/a&gt;
          &lt;/p&gt;
        &lt;/ion-content&gt;
      &lt;/ion-view&gt;
    &lt;/script&gt;
  
    &lt;script id="templates/fact1.html" type="text/ng-template"&gt;
      &lt;ion-view view-title="Fact1"&gt;
        &lt;ion-content class="padding"&gt;
          &lt;p&gt;
            &lt;a class="button icon ion-home" href="#/tab/home"&gt; Home&lt;/a&gt;
            &lt;a class="button icon icon-right ion-chevron-right" href="#/tab/fact1"&gt;
              Fact1
            &lt;/a&gt;
            &lt;a class="button icon icon-right ion-chevron-right" href="#/tab/fact2"&gt;
              Fact2
            &lt;/a&gt;
            &lt;a class="button icon icon-right ion-chevron-right" href="#/tab/fact3"&gt;
              Fact3
            &lt;/a&gt;
          &lt;/p&gt;
        &lt;/ion-content&gt;
      &lt;/ion-view&gt;
    &lt;/script&gt;
  
    &lt;script id="templates/fact2.html" type="text/ng-template"&gt;
      &lt;ion-view view-title="Fact2"&gt;
        &lt;ion-content class="padding"&gt;
          &lt;p&gt;
            &lt;a class="button icon ion-home" href="#/tab/home"&gt; Home&lt;/a&gt;
            &lt;a class="button icon icon-right ion-chevron-right" href="#/tab/fact1"&gt;
              Fact1
            &lt;/a&gt;
            &lt;a class="button icon icon-right ion-chevron-right" href="#/tab/fact2"&gt;
              Fact2
            &lt;/a&gt;
            &lt;a class="button icon icon-right ion-chevron-right" href="#/tab/fact3"&gt;
              Fact3
            &lt;/a&gt;
          &lt;/p&gt;
        &lt;/ion-content&gt;
      &lt;/ion-view&gt;
    &lt;/script&gt;
  
    &lt;script id="templates/fact3.html" type="text/ng-template"&gt;
      &lt;ion-view view-title="Fact3"&gt;
        &lt;ion-content class="padding"&gt;
          &lt;p&gt;
            &lt;a class="button icon ion-home" href="#/tab/home"&gt; Home&lt;/a&gt;
            &lt;a class="button icon icon-right ion-chevron-right" href="#/tab/fact1"&gt;
              Fact1
            &lt;/a&gt;
            &lt;a class="button icon icon-right ion-chevron-right" href="#/tab/fact2"&gt;
              Fact2
            &lt;/a&gt;
            &lt;a class="button icon icon-right ion-chevron-right" href="#/tab/fact3"&gt;
              Fact3
            &lt;/a&gt;
          &lt;/p&gt;
        &lt;/ion-content&gt;
      &lt;/ion-view&gt;
    &lt;/script&gt;
  
    &lt;script id="templates/about.html" type="text/ng-template"&gt;
      &lt;ion-view view-title="About"&gt;
        &lt;ion-content class="padding"&gt;
          &lt;h3&gt;Create hybrid mobile apps with the web technologies you love.&lt;/h3&gt;
          &lt;p&gt;Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.&lt;/p&gt;
          &lt;p&gt;Built with Sass and optimized for AngularJS.&lt;/p&gt;
          &lt;p&gt;
            &lt;a class="button icon icon-right ion-chevron-right" href="#/tab/navstack"&gt;Tabs Nav Stack&lt;/a&gt;
          &lt;/p&gt;
        &lt;/ion-content&gt;
      &lt;/ion-view&gt;
    &lt;/script&gt;
  
    &lt;script id="templates/nav-stack.html" type="text/ng-template"&gt;
      &lt;ion-view view-title="Tab Nav Stack"&gt;
        &lt;ion-content class="padding"&gt;
          &lt;p&gt;&lt;img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"&gt;&lt;/p&gt;
        &lt;/ion-content&gt;
      &lt;/ion-view&gt;
    &lt;/script&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>angular.module('ionicApp', ['ionic'])
  
  .config(function($stateProvider, $urlRouterProvider) {
  
    $stateProvider
      .state('tabs', {
        url: "/tab",
        abstract: true,
        templateUrl: "templates/tabs.html"
      })
      .state('tabs.home', {
        url: "/home",
        views: {
          'home-tab': {
            templateUrl: "templates/home.html",
            controller: 'HomeTabCtrl'
          }
        }
      })
      .state('tabs.fact1', {
        url: "/fact1",
        views: {
          'home-tab': {
            templateUrl: "templates/fact1.html",
            controller: 'Fact1TabCtrl'
          }
        }
      })
      .state('tabs.fact2', {
        url: "/fact2",
        views: {
          'home-tab': {
            templateUrl: "templates/fact2.html",
            controller: 'Fact2TabCtrl'
          }
        }
      })
      .state('tabs.fact3', {
        url: "/fact3",
        views: {
          'home-tab': {
            templateUrl: "templates/fact3.html",
            controller: 'Fact3TabCtrl'
          }
        }
      })
      .state('tabs.about', {
        url: "/about",
        views: {
          'about-tab': {
            templateUrl: "templates/about.html"
          }
        }
      })
      .state('tabs.navstack', {
        url: "/navstack",
        views: {
          'about-tab': {
            templateUrl: "templates/nav-stack.html"
          }
        }
      });
  
  
     $urlRouterProvider.otherwise("/tab/home");
  
  })
  
  .controller('HomeTabCtrl', function($scope, $rootScope) {
    console.log('Home');
  
    $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ 
      console.log('State change from: ' + fromState.name + ' to: ' + toState.name);
    });
  })
  
  .controller('Fact1TabCtrl', function($scope) {
    console.log('Fact1');
  })
  
  .controller('Fact2TabCtrl', function($scope) {
    console.log('Fact2');
  })
  
  .controller('Fact3TabCtrl', function($scope) {
    console.log('Fact3');
  });
  </code></pre>
  
  <p>This is the tree of the states:</p>
  
  <pre><code>        Home
       /   |   \
  Fact1  Fact2  Fact3
  </code></pre>
  
  <p>Below is the flow (open Console Log): </p>
  
  <ul>
  <li><p>I started with <strong>Home -> Fact1 -> Fact2 -> Fact3</strong>. Everything happens as expected to initialize all controllers. </p></li>
  <li><p>Then it got tricky from <strong>Fact3 -> Fact1</strong> (nothing happens) <strong>-> Fact3</strong> (again) <strong>-> Fact2</strong> (just to make sure no controller instantiated) <strong>-> Fact3</strong> (again, but <strong>BOOM</strong> Fact3 Controller now suddenly instantiated --> <strong>WHY??</strong>)</p></li>
  </ul>
  
  <p><strong>console.log output</strong></p>
  
  <pre><code>Home
  State change from: tabs.home to: tabs.fact1
  Fact1
  State change from: tabs.fact1 to: tabs.fact2
  Fact2
  State change from: tabs.fact2 to: tabs.fact3
  Fact3
  State change from: tabs.fact3 to: tabs.fact1
  State change from: tabs.fact1 to: tabs.fact3
  State change from: tabs.fact3 to: tabs.fact2
  State change from: tabs.fact2 to: tabs.fact3
  Fact3
  </code></pre>
  
  <p>So now I am confused more than ever:</p>
  
  <ol>
  <li><p><strong>Why Fact3 got instantiated?</strong></p></li>
  <li><p><strong>What is the exact rule of controller instantiate amongst sibling states now?</strong></p></li>
  <li><p><strong>What is the best practice for controller initialization then? Since I have 2 scenarios: (a) init once and only once during app runtime, (b) re-init when coming back to the state every time regardless when and how the state was before</strong></p></li>
  </ol>