<div ng-controller="AppCtrl" ng-cloak>
  <md-content class="md-padding">
    <md-tabs class="md-accent" md-selected="data.selectedIndex" md-align-tabs="{{data.bottom ? 'bottom' : 'top'}}">
      <md-tab id="tab1">
        <md-tab-label>Item One</md-tab-label>
        <md-tab-body>
          View for Item #1 <br/>
          data.selectedIndex = 0;
        </md-tab-body>
      </md-tab>
      <md-tab id="tab2" ng-disabled="data.secondLocked">
        <md-tab-label>{{data.secondLabel}}</md-tab-label>
        <md-tab-body>
          View for Item #2 <br/>
          data.selectedIndex = 1;
        </md-tab-body>
      </md-tab>
      <md-tab id="tab3">
        <md-tab-label>Item Three</md-tab-label>
        <md-tab-body>
          View for Item #3 <br/>
          data.selectedIndex = 2;
        </md-tab-body>
      </md-tab>
      <md-tab id="tab4">
        <md-tab-label><md-icon md-svg-icon="communication:phone"></md-icon></md-tab-label>
        <md-tab-body>
          View for Item #4 <br/>
          data.selectedIndex = 3;
        </md-tab-body>
      </md-tab>
      <md-tab id="tab5">
        <md-tab-label><md-icon md-svg-icon="favorite"></md-icon></md-tab-label>
        <md-tab-body>
          View for Item #5 <br/>
          data.selectedIndex = 4;
        </md-tab-body>
      </md-tab>
    </md-tabs>
  </md-content>

  <div class="md-padding" layout="row" layout-sm="column" layout-align="left center"
       style="padding-top: 0;">
    <md-checkbox ng-model="data.secondLocked" aria-label="Disable item two?" style="margin: 5px;">
      Disable item two?
    </md-checkbox>
    <md-checkbox ng-model="data.bottom" aria-label="Align tabs to bottom?" style="margin: 5px;">
      Align tabs to bottom?
    </md-checkbox>
  </div>
</div>
