Angular Material Layout

by Bruno Sabetta

HTML

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.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://rawgit.com/angular/bower-material/master/angular-material.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>
    </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">
          <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>

CSS

main {
  background: ivory;
}

img {
  max-width: 100%;
  width: 100%;
}

JavaScript

angular.module('firstApplication', ['ngMaterial']).controller('tabController', tabController);

function tabController($scope, $interval) {

  $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() {
      var size = $scope.boards.length - 1;
      var interval = $interval(function() {
      	if(size >= 0){
        	$scope.data.selectedIndex = size--;
        }else{
        	$interval.cancel(interval);
        }
      }, 750);
    }
    /*********    /Here i am changing tabs     ****8**/
}