title: How to disable angular-ui bootstrap tabs?
body: <p>I'm trying to create a multi step form in angularjs and angularjs bootstrap.</p>
  
  <p>I have the following html code, buttons on each step that validate current tab and move to the next. What I'm looking for is a "disabled" state for each tab that will be set to true while the form is not validated in current state "isStepClean(0)".</p>
  
  <p>I've tried with class="disabled" and disabled as attribute but didn't work. Any ideas how to do it?</p>
  
  <pre><code>&lt;tabs&gt;
      &lt;pane heading="1. Recipients" active="panes[0].active" disabled="panes[0].disabled"&gt;
          ....
          &lt;input type="button" ng-disabled="isStepClean(0)" class="btn btn-info pull-right" ng-click="panes[1].active = true" name="" value="Next step" /&gt;
      &lt;/pane&gt;
      &lt;pane heading="2. Information" active="panes[1].active" disabled="panes[1].disabled"&gt;
           ....
           &lt;input type="button" ng-disabled="isStepClean(1)" class="btn btn-info pull-right" ng-click="panes[2].active = true" name="" value="Next step" /&gt;
      &lt;/pane&gt;
      &lt;pane heading="3. Preview" active="panes[2].active" disabled="panes[2].disabled"&gt;
           ....
           &lt;input type="button" ng-disabled="isStepClean(2)" class="btn btn-info pull-right" ng-click="panes[3].active = true" name="" value="Next step" /&gt;
      &lt;/pane&gt;
  &lt;/tabs&gt;
  </code></pre>
  
  <p>In the controller I have:</p>
  
  <pre><code>$scope.panes = [
          {active:true},
          {active:false},
          {active:false},
          {active:false}
      ];
  </code></pre>