title: multiple 'md-tab' have 'md-active' class at the same time when I switch tabs frequently with angular md-selected index
body: <p>When I am switching md-tabs frequently, Md-tabs are switching correctly but multiple md-tab-item elements have 'md-active' class at the same time, So I can not see the tab's content which is active because it is overlapped by its right tab's content.</p>
  
  <p>According to me, in angular-material, when we select a tab, angular first deselect the previous tab(hide previously displayed content on the page) and displays selected tabs content.  While doing this process, angular misses removing 'md-active' class of previously active tab.</p>
  
  <p>Here is the fiddle to reproduce the behavior.  This is random behavior and comes while concurrent clicks. </p>
  
  <p>Kindly wait for 1 minute after click on 'switch tabs' button 
  <a href="https://jsfiddle.net/nq5hcdzw/15/" rel="noreferrer">jsFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('firstApplication', ['ngMaterial']).controller('tabController', tabController);
  
            function tabController ($scope) {            
  
               $scope.boards = Array.from(Array(100).keys());
  
               $scope.data = {
                  selectedIndex: 0,
                  secondLocked:  true,
                  secondLabel:   "2",
                  bottom:        false
               };
               $scope.next = function() {
                  $scope.data.selectedIndex = Math.min($scope.data.selectedIndex + 1, 2) ;
               };
               $scope.previous = function() {
                  $scope.data.selectedIndex = Math.max($scope.data.selectedIndex - 1, 0);
                  
               };
               $scope.switch = function() {
                $scope.activeTabsCounter = $("md-tab-item.md-active").length;
               }
               
               
              /*********    Here i am changing tabs     ****8**/
              
              /******** This is strict behaviour where I get the problem but randomly *****/
              $scope.switchTabs = function(){
              clearInterval(interval);
              var i = $scope.boards.length - 1; 
              var interval = setInterval(function() { 
                 if($scope.activeTabsCounter == 1) {
                   if(i &gt;= 0)                       
                  $(".md-accent md-tab-item")[i--].click(); 
                  $scope.switchTabs();
                  } else {
                  clearInterval(interval);
                  }
                
              }, 100);
             
              /*********    /Here i am changing tabs     ****8**/
             
              }
            }
            
            
            </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"&gt;&lt;/script&gt;
  &lt;script src="https://rawgit.com/angular/bower-material/master/angular-material.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  
  &lt;div ng-app="firstApplication"&gt; 
        &lt;div id="tabContainer" ng-controller="tabController as ctrl" ng-cloak&gt;
           &lt;div&gt; &lt;br&gt;&lt;br&gt;
           &lt;button ng-click="switchTabs()"&gt;Click here to switch tabs&lt;/button&gt;
           &lt;br&gt;&lt;br&gt;
           Current active Tabs: {{activeTabsCounter}} 
           &lt;br&gt;
           &lt;/div&gt;
           &lt;md-content class="md-padding"&gt;
              &lt;md-tabs class="md-accent" md-selected="data.selectedIndex" md-align-tabs="{{data.bottom ? 'bottom' : 'top'}}"&gt;
                 &lt;md-tab md-on-select="switch()" id="tab{{board}}" ng-repeat="board in boards"&gt;
                    &lt;canvas id="canvas-{{board}}-1" width="1600" height="900"&gt;&lt;/canvas&gt;
                    &lt;canvas id="canvas-{{board}}-2" width="1600" height="900"&gt;&lt;/canvas&gt;
                    &lt;md-tab-label&gt;{{board}}&lt;/md-tab-label&gt;
                    &lt;md-tab-body&gt;Item #{{board}} &lt;br/&gt;selectedIndex = {{board}};&lt;/md-tab-body&gt;
                 &lt;/md-tab&gt;
              &lt;/md-tabs&gt;
           &lt;/md-content&gt;
        &lt;/div&gt;
     &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am switching tabs in 100 ms but in our application, we are getting this issue in longer time interval also. We are emitting board switch event using socket.</p>