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>
      <button ng-click="switchTabs()">Start Crazy Switching</button>
      <button ng-click="cancelInterval()">Stop Switching</button>
      <br>
      <br>
    </div>
    <md-content class="md-padding">
      <md-tabs class="md-accent" md-selected="data.selectedIndex">
        <md-tab 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>

JavaScript

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

function tabController($scope, $timeout) {

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

  $scope.switchTabs = function() {
    
    if(cancelInterval){ 
    	cancelInterval = false;
      return;
    }
    
    var size = $scope.boards.length - 1;
    var randomTime =  Math.floor((Math.random() * 1000) + 10);
    
    $timeout(function() {
      var randomIndex = Math.floor((Math.random() * size));
      $scope.data.selectedIndex = randomIndex;
      console.log("Index: " + randomIndex + " - Time: " + randomTime);
      
      $scope.switchTabs();
    }, randomTime);
    
  };

  $scope.cancelInterval = function() {
    cancelInterval = true;
  };
}