Angular Tabs

<mui-tabs>
  <mui-tab label="Tab 1">Pane-1</mui-tab>
  <mui-tab label="Tab 2" active>Pane-2</mui-tab>
  <mui-tab label="Tab 3">Pane-3</mui-tab>
</mui-tabs>

<mui-tabs justified>
  <mui-tab label="Tab 1">Pane-1</mui-tab>
  <mui-tab label="Tab 2">Pane-2</mui-tab>
  <mui-tab label="Tab 3">Pane-3</mui-tab>
</mui-tabs>

<script>
  angular.module('myApp').controller('ExampleCtrl', function($scope) {
    $scope.selectedIndex = 1;

    $scope.onChange = function() {
      console.log('User activated new tab: ' + $scope.selectedIndex);
    };

    $scope.onSelect = function(tabIndex) {
      console.log('Tab selected: ' + tabIndex);
    }

    $scope.onDeselect = function(tabIndex) {
      console.log('Tab deselected: ' + tabIndex);
    }
  });
</script>
<div ng-controller="ExampleCtrl">
  <mui-tabs selected="selectedIndex" on-change="onChange()">
    <mui-tab label="Tab 1" on-select="onSelect(0)" on-deselect="onDeselect(0)">
      Pane-1
    </mui-tab>
    <mui-tab label="Tab 2" on-select="onSelect(1)" on-deselect="onDeselect(1)">
      Pane-2
    </mui-tab>
    <mui-tab label="Tab 3" on-select="onSelect(2)" on-deselect="onDeselect(2)">
      Pane-3
    </mui-tab>
  </mui-tabs>
</div>