How do I make the browser navigate to a specified tab on button-click?

Question

I have an mdTabs setup like this:

<md-tabs md-dynamic-height md-border-bottom>
  <md-tab label="The first tab" id="first-tab-wrapper" class="tab-wrapper">
  </md-tab>
  <md-tab label="The second tab" id="second-tab-wrapper" class="tab-wrapper">
  </md-tab>
</md-tabs>
<button>GO TO SECOND TAB</button>

When the user clicks the button, the browser should go to the second mdTab. How do I do this?

Answer 1

You can use md-selected to keep track of the tab:

Index of the active/selected tab

HTML:

<md-tabs md-dynamic-height md-border-bottom md-selected="selectedTab">
  <md-tab label="The first tab" id="first-tab-wrapper" class="tab-wrapper">
  </md-tab>
  <md-tab label="The second tab" id="second-tab-wrapper" class="tab-wrapper">
  </md-tab>
</md-tabs>
<button ng-click="selectTab()">GO TO SECOND TAB</button>

JavaScript:

$scope.selectTab = function() {
  //go to second tab
  $scope.selectedTab = 1;
}