AngularJS Select Tab from Button Click

Question

Using the AngularJS tabs directive, is there a way to select a tab from a button. Effectively what I would like to do is click the button 'Select Tab 3' and the third tab will be selected.

 <md-button id="button" class="md-raised">Select Tab Three</md-button>

<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-content>
      </md-tab>
      <md-tab label="two">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Two</h1>
      </md-tab>
      <md-tab label="three" id="three">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Three</h1>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
</div>

Answer 1

You can use md-selected attribute in md-tabs to choose the selected tab,https://material.angularjs.org/latest/api/directive/mdTabs

<md-button id="button" ng-click="selectedTab = 2" class="md-raised">Select Tab Three</md-button>

<div ng-cloak>
  <md-content>
    <md-tabs  md-selected="selectedTab" md-dynamic-height md-border-bottom>
      <md-tab label="one">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab One</h1>
        </md-content>
      </md-tab>
      <md-tab label="two">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Two</h1>
      </md-tab>
      <md-tab label="three" id="three">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Three</h1>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
</div>