multiple 'md-tab' have 'md-active' class at the same time when I switch tabs frequently with angular md-selected index

Question

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.

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.

Here is the fiddle to reproduce the behavior. This is random behavior and comes while concurrent clicks.

Kindly wait for 1 minute after click on 'switch tabs' button jsFiddle

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 >= 0) 					                 
                $(".md-accent md-tab-item")[i--].click(); 
                $scope.switchTabs();
                } else {
                clearInterval(interval);
                }
            		
            }, 100);
           
            /*********    /Here i am changing tabs     ****8**/
           
            }
          }
          
          
          

<link href="https://rawgit.com/angular/bower-material/master/angular-material.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div ng-app="firstApplication"> 
      <div id="tabContainer" ng-controller="tabController as ctrl" ng-cloak>
         <div> <br><br>
         <button ng-click="switchTabs()">Click here to switch tabs</button>
         <br><br>
         Current active Tabs: {{activeTabsCounter}} 
         <br>
         </div>
         <md-content class="md-padding">
            <md-tabs class="md-accent" md-selected="data.selectedIndex" md-align-tabs="{{data.bottom ? 'bottom' : 'top'}}">
               <md-tab md-on-select="switch()" id="tab{{board}}" ng-repeat="board in boards">
                  <canvas id="canvas-{{board}}-1" width="1600" height="900"></canvas>
                  <canvas id="canvas-{{board}}-2" width="1600" height="900"></canvas>
                  <md-tab-label>{{board}}</md-tab-label>
                  <md-tab-body>Item #{{board}} <br/>selectedIndex = {{board}};</md-tab-body>
               </md-tab>
            </md-tabs>
         </md-content>
      </div>
   </div>

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.

Answer 1

As I understand, your idea is change the tabs programmatically every X seconds so...

Firstly, use angularJs $interval instead of setInterval() (that's because setInterval() doesn't care about angular digest).
Secondly, you have to update the selectedIndex instead of calling click() event...
Finally, remove the active tabs check (I suppose that you added for testing)

I've updated your jsFiddle

CONTROLLER:

function tabController($scope, $interval) {

    $scope.boards = Array.from(Array(100).keys());
    $scope.data = {
        selectedIndex: 0
    };

    $scope.switchTabs = function() {
        var size = $scope.boards.length - 1;

        var interval = $interval(function() {
            if(size >= 0){
                $scope.data.selectedIndex = size--;
            }else{
                $interval.cancel(interval);
            }
        }, 750);
    }
}

HTML:

<md-tabs class="md-accent" md-selected="data.selectedIndex">
    <md-tab ng-repeat="board in boards">
      <md-tab-label>{{board}}</md-tab-label>
      <md-tab-body>
          Item #{{board}}<br/>
          selectedIndex = {{board}};
      </md-tab-body>
    </md-tab>
</md-tabs>