title: Change index of AngularJS md-tabs have no effect at all
body: <p>In my Angular app, I have a md-tabs whose md-selected directive is binded to a property in my controller. I'd like to change the current tab to the one whose index is set by a function called by ng-click somewhere else in my template.</p>
  
  <p>I did it this way:</p>
  
  <pre><code>&lt;div ng-controller="TrackingCtrl" layout-fill&gt;
     &lt;md-content ng-if="isSmart" layout-fill&gt;
        &lt;md-tabs md-selected="selectedIndex" layout-fill&gt;
           &lt;md-tab&gt;.........&lt;/md-tab&gt;
           &lt;md-tab&gt;.........&lt;/md-tab&gt;
           &lt;md-tab&gt;.........&lt;/md-tab&gt;
           &lt;md-tab&gt;
              &lt;md-tab-label&gt;{{ 'tracking.positions.TITLE' | translate }}&lt;/md-tab-label&gt;
              &lt;md-tab-body&gt;
                  &lt;md-tab-content layout-fill flex&gt;
                      &lt;button ng-click="map.panTo(getPosition());displayMap();"&gt;&lt;/button&gt;
              &lt;/md-tab-body&gt;
           &lt;/md-tab&gt;
      &lt;/md-tabs&gt;
   &lt;/md-content&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my controller I have :</p>
  
  <pre><code>  $scope.selectedIndex = 0;
    $scope.displayMap = function() {
        $scope.selectedIndex = 1;
    };
  </code></pre>
  
  <p>But it has no effect at all when I click my button which calls displayMap();</p>
  
  <p>I've inspected the problem: </p>
  
  <ul>
  <li>When I set $scope.selectedIndex = 1; in my controller, the default tab is the one whose index is 1. <strong>OK</strong></li>
  <li>When I set md-selected="1" in my template, the default tab is the one whose index is 1. <strong>OK</strong></li>
  <li>When I set a breakpoint in my code, and when I click my button, displayMap() is called, and $scope.selectedIndex = 1; is executed. <strong>OK</strong></li>
  </ul>
  
  <p>It seems everything works fine... except the tab doesn't change.</p>
  
  <p>I'm running Angular Material 1.0.2</p>
  
  <p>I even used $apply to force update (no effect) :</p>
  
  <pre><code>  $scope.selectedIndex = 0;
    $scope.displayMap = function () {
        $timeout(function () {
            if (!$scope.$$phase) {
                $scope.$apply(function () {
                    $scope.selectedIndex = 1;
                });
            }
        });
    };
  </code></pre>