Changing Tab using Button Click

Question

<div ng-cloak>
  <md-content>
   <md-tabs md-dynamic-height md-border-bottom>
  <md-tab label="one">
     <md-content class="md-padding">
        <h1 class="md-display-2">Tab One</h1>          
             <md-button class="md-raised">Save & Next</md-button>
    </md-content>
  </md-tab>
  <md-tab label="two"  ng-disabled="true">
    <md-content class="md-padding">
      <h1 class="md-display-2">Tab Two</h1>          
     <md-button class="md-raised">Save & Back </md-button>
    </md-content>
  </md-tab>      
</md-tabs>

I am using angular + angular material , there are two tab menu "One" and "Two" when I clicked on "Save & Next" button next tab should be enabled and foucs goes to next tab and reverse things should happen when i clicked on second tab "Save & Back" button

Answer 1

md-selected on md-tabs shows you the current index of the tabs. You can change the index with ng-click on the button. Should be something like the following

<div ng-cloak>
 <md-content>
  <md-tabs md-dynamic-height md-border-bottom md-selected="myTabIndex">
   <md-tab label="one">
    <md-content class="md-padding">
    <h1 class="md-display-2">Tab One</h1>          
         <md-button class="md-raised" ng-click="myTabIndex = myTabIndex+1">Save & Next</md-button>
    </md-content>
   </md-tab>
   <md-tab label="two"  ng-disabled="true">
    <md-content class="md-padding">
     <h1 class="md-display-2">Tab Two</h1>          
     <md-button class="md-raised" ng-click="myTabIndex = myTabIndex-1">Save & Back </md-button>
    </md-content>
   </md-tab>      
</md-tabs>

But you should now if the next or previous tab is disabled, this method doesn't work, because you cannot switch to a tab which is disabled.

Answer 2

You can use function in js for changing tab.

<md-button class="md-raised" ng-click="changetab('n')">Save & Next</md-button>
<md-button class="md-raised" ng-click="changetab('b')">Save & Back</md-button>

in .js

$scope.changetab = function(nav){
    if(nav == 'n')
      $scope.myTabIndex = $scope.myTabIndex +1;
    else
      $scope.myTabIndex = $scope.myTabIndex -1;
}