title: Angular Bootstrap Tabs Set Active Tab Through Markup
body: <p>I'm trying to set a tab as active through the markup. For some reason when I set the active attribute on a tab it seems to mangle the state of the tabs. The page loads up fine and the tab that was set as active will be deactivated when clicking another tab. When I click back on the tag that was set with active="true" the previously selected tab will not be deselected.</p>
  
  <pre><code>...
  &lt;tab heading="Dynamic Title 1" active="true"&gt;Some Title 1&lt;/tab&gt;
  ...
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/xzDbezXgkSMr6wokov6g?p=info" rel="nofollow">http://plnkr.co/edit/xzDbezXgkSMr6wokov6g?p=info</a></p>
  
  <p>I switched to creating a variable that is set to true at init and plopped that into the active attribute. I'm hoping there's a better way to this though.</p>
  
  <pre><code>  &lt;tabset ng-init="startActive = true"&gt;
      ...
      &lt;tab heading="Dynamic Title 1" active="startActive"&gt;Some Title 1&lt;/tab&gt;
      ...
    &lt;/tabset&gt;
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/mt5MQSZEl730fsMuMxg8" rel="nofollow">http://plnkr.co/edit/mt5MQSZEl730fsMuMxg8</a></p>
  
  <p>I don't want to define the tabs in js because this is a project that uses webforms and piping data from that to js might be worse than what I'm doing here. I change the page to be completely built with angular in which case piping data like the tab to be selected could be part of some config endpoint that would be hit on the controller's init. I'd rather not have to redesign a complete page to make this change but it seems like the most correct way to go. Any thoughts and tips would be appreciated.</p>