title: md-tabs: setting variable for md-selected not working when calling function from inside ui-router
body: <p>I have a <code>ui-router</code> template containing <code>md-tabs</code> from which some tabs are static, others are created dynamically using <code>ng-repeat</code> iterating through a given array of the data model.</p>
  
  <p>Inside those dynamically created tabs there are three buttons to do the following</p>
  
  <ul>
  <li>move tab left by one position</li>
  <li>move tab right by one position</li>
  </ul>
  
  <p>The <code>move tab</code> buttons call a function inside the same controller. The <code>$index</code> value of the currently shown tabs as well as the desired direction (<code>-1</code> for moving left, <code>1</code> for moving right) are passed to the function.</p>
  
  <p>So the HTML-snippet for the view looks as follows:</p>
  
  <pre><code>&lt;md-content flex layout-padding&gt;
      &lt;md-card&gt;
          &lt;md-tabs md-dynamic-height md-border-bottom md-autoselect md-swipe-content md-selected="selectedTab"&gt;
              &lt;md-tab id="{{ 'tab' + $index }}" data-ng-repeat="tab in tabs track by $index"&gt;
                  &lt;md-tab-label&gt;Tab {{ $index + 1 }}&lt;/md-tab-label&gt;
                  &lt;md-tab-body&gt;
                      &lt;md-card-title&gt;
                          &lt;md-card-title-text&gt;
                              &lt;div flex layout="row"&gt;
                                  &lt;div flex&gt;&lt;span class="md-headline"&gt;Tab {{ $index + 1 }}&lt;/span&gt;&lt;/div&gt;
                                  &lt;div flex align="right"&gt;
                                      &lt;md-button ng-click="moveTab(-1, $index)"&gt;Move tab left&lt;/md-button&gt;
                                      &lt;md-button ng-click="moveTab(1, $index)"&gt;Move tab right&lt;/md-button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/md-card-title-text&gt;
                      &lt;/md-card-title&gt;
                      &lt;md-card-content&gt;
                      &lt;p&gt;This is tab {{ $index + 1 }}&lt;/p&gt;
                      &lt;/md-card-content&gt;
                  &lt;/md-tab-body&gt;
              &lt;/md-tab&gt;
          &lt;/md-tabs&gt;
      &lt;/md-card&gt;
  &lt;/md-content&gt;
  </code></pre>
  
  <p>The function moving the tabs is implemented in <code>MainController</code> as:</p>
  
  <pre><code>$scope.moveTab = function(direction, TabIdx) {
      var staticTabs = 3
  
      var arr = $scope.tabs
      var fromIdx = sectorIdx
      var toIdx = tabIdx + direction
  
      // correct `toIdx` in order to prevent index overflow for first/last array element
      if (toIdx &lt; 0) {
          toIdx = arr.length - 1
      } else if (toIdx &gt; arr.length-1) {
          toIdx = 0
      }
      else {
          ; // nothing to do here since `toIdx` does not need to be corrected
      }
  
      var tab = arr.splice(fromIdx, 1)[0]
      arr.splice(toIdx, 0, tab)
  
      $scope.selectedTab = staticTabs + toIdx
      console.log($scope.selectedTab)
  }    
  </code></pre>
  
  <p>After clicking the desired button to move a tab, the data of the according tab neigbour is displayed as desired.
  This shows that maniupulating the <code>$scope.tabs</code> array works correctly. Additionally the log-message shows that even the new value for <code>$scope.selectedTab</code> is calculated correctly.
  However, the new tab is not selected in the view.</p>
  
  <p>This confuses me hence both variables <code>$scope.tabs</code> and <code>$scope.selectedTab</code> are defined in the same controller and should be part of the same <code>$scope</code> instance.
  In addition, the manipulated <code>$scope.tabs</code> array is used in other views and shows the tab data in the new order, whereas the new value for <code>$scope.selectedTab</code> does not seem to be available and the shown tab does not change.</p>