title: AngularJS: UI-Router when switching tabs the first one is always selected
body: <p>I have the following html markup:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="col-lg-2 col-md-2 panel-container"&gt;
    &lt;tabset vertical="true" type="pills"&gt;
      &lt;tab ng-repeat="tab in tabsViews" select="selectView(tab.index)" class=" {{tabsViews[tab.index-1]['invalid'] ? 'invalid-tab': 'valid-tab' }}"&gt;
        &lt;tab-heading&gt;{{tab.title}}&lt;/tab-heading&gt;
      &lt;/tab&gt;
    &lt;/tabset&gt;
  &lt;/div&gt;
  
  &lt;div class="col-lg-10 col-md-10 panel-container"&gt;
    &lt;div data-ui-view data-autoscroll="false"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and in the controller I defined my tabs this way:</p>
  
  <pre class="lang-js prettyprint-override"><code>$scope.tabsViews = [{
    index: 1,
    name: 'accountUDFs',
    invalid: false,
    title: resourceFactory.getResource('Labels', 'xUDFs').format(resourceFactory.getResource('Labels', 'account'))
  }, {
    index: 2,
    name: 'invoiceUDFs',
    invalid: false,
    title: resourceFactory.getResource('Labels',
      'xUDFs').format(resourceFactory.getResource('Labels', 'invoice'))
  }, {
    index: 3,
    name: 'confirmationText',
    invalid: false,
    title: resourceFactory.getResource('Labels', 'confirmationText')
  }];
  </code></pre>
  
  <p>and I defined the following states:</p>
  
  <pre class="lang-js prettyprint-override"><code>app.config(['$stateProvider',
    function($stateProvider) {
      $stateProvider.state('home', {
        url: '/',
        controller: 'prefsAcsController',
        template: ''
      }).state('edit', {
        url: '/edit',
        controller: 'prefsAcsCrudController',
        templateUrl: '/customerAccounts/PrefsAcs'
      }).state('accountUDFs', {
        url: '/AccountUDFs',
        templateUrl: '/customerAccounts/PrefsAcs/AccountsUDFs'
      }).state('invoiceUDFs', {
        url: '/InvoiceUDFs',
        templateUrl: '/customerAccounts/PrefsAcs/InvoiceUDFs'
      }).state('confirmationText', {
        url: '/ConfirmationText',
        templateUrl: '/customerAccounts/PrefsAcs/ConfirmationText'
      });
    }
  ]);
  </code></pre>
  
  <p>So, when I just go to the Preferences page from the menu, the first tab is selected and all is good.</p>
  
  <p>However, I also added a link to the second tab in another page</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;a href='/CustomerAccounts/PrefsAcs#/InvoiceUDFs'&gt;
  </code></pre>
  
  <p>now, when I click on this link, I still see a message in Console that the first tab is about to be activated and that tab is highlighted. But I see the content of the second tab which is what I want in this case.</p>
  
  <p>Do you know what makes the first tab automatically selected?</p>
  
  <p>Do you know what should I do to skip that selectView code when I come with that full URL and to have the correct tab highlighted ?</p>