<style>
  .nav-tabs > li > div {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
  }

  .nav-tabs > li > div:hover {
    border-color: #eee #eee #ddd;
  }

  .nav-tabs > li.active > div, .nav-tabs > li.active > div:hover {
    color: #555;
    cursor: default;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
  }

  .nav > li > div {
    position: relative;
    display: block;
    padding: 10px 15px;
  }

  .nav > li > div:hover {
    background-color: #eee;
  }

  .uib-tab > div {
    color: #337ab7;
    cursor: pointer;
  }

  .nav-tabs > li.disabled > div { 
    color: #999; 
  }

  .nav-tabs>li.disabled>div:hover, .nav-tabs>li.disabled>div:focus {
    color: #999;
    text-decoration: none;
    background-color: transparent;
    cursor: not-allowed;
  }

  form.tab-form-demo .tab-pane {
    margin: 20px 20px;
  }
</style>

<div ng-controller="TabsDemoCtrl">
  <p>Select a tab by setting active binding to true:</p>
  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="tabs[0].active = true">Select second tab</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].active = true">Select third tab</button>
  </p>
  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
  </p>
  <hr />

  <uib-tabset>
    <uib-tab heading="Static title">Static content</uib-tab>
    <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
      {{tab.content}}
    </uib-tab>
    <uib-tab select="alertMe()">
      <uib-tab-heading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </uib-tab-heading>
      I've got an HTML heading, and a select callback. Pretty cool!
    </uib-tab>
  </uib-tabset>

  <hr />

  <uib-tabset vertical="true" type="pills">
    <uib-tab heading="Vertical 1">Vertical content 1</uib-tab>
    <uib-tab heading="Vertical 2">Vertical content 2</uib-tab>
  </uib-tabset>

  <hr />

  <uib-tabset justified="true">
    <uib-tab heading="Justified">Justified content</uib-tab>
    <uib-tab heading="SJ">Short Labeled Justified content</uib-tab>
    <uib-tab heading="Long Justified">Long Labeled Justified content</uib-tab>
  </uib-tabset>

  <hr />

  Tabs using nested forms:
  <form name="outerForm" class="tab-form-demo">
    <uib-tabset>
      <uib-tab heading="Form Tab">
        <ng-form name="nestedForm">
          <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" required ng-model="model.name"/>
          </div>
        </ng-form>
      </uib-tab>
      <uib-tab heading="Tab One">
        Some Tab Content
      </uib-tab>
      <uib-tab heading="Tab Two">
        More Tab Content
      </uib-tab>
    </uib-tabset>
  </form>
  Model:
  <pre>{{ model | json }}</pre>
  Nested Form:
  <pre>{{ outerForm.nestedForm | json }}</pre>
</div>
