title: Angular-UI Tabs: add class to a specific tab
body: <p>I want to create the following tabs with Angular UI:</p>
  
  <p><a href="https://i.stack.imgur.com/5wKPC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5wKPC.png" alt="tabs"></a><br>
  <sub>(source: <a href="http://gyazo.com/1a0153506b386d4746c108c420f7ae1b.png" rel="nofollow noreferrer">gyazo.com</a>)</sub>  </p>
  
  <p>So, I'm adding the styles based on Bootstap's class names/markup:</p>
  
  <pre><code>.nav-tabs &gt; li.new &gt; a {
    padding-top: 5px;
  }
  .nav-tabs &gt; .new &gt; a:after {
    content: "NEW";
    color: indianred;
    font-size: 10px;
    vertical-align: super;
    padding-left: 2px;
  }
  </code></pre>
  
  <p>(As you can see I need to compensate padding on <code>&lt;a&gt;</code> a bit after I added super-scripted text, otherwise it is pushed down.)</p>
  
  <p>Next, I have the following markup &amp; code in <code>html/js</code> files:</p>
  
  <pre><code>HTML:
  &lt;tabset&gt;
      &lt;tab ng-repeat="tab in tabs" heading="{{ tab.title }}" active="tab.active" &gt;&lt;!-- ng-class="{new: tab.new}"--&gt;
          &lt;div ng-include="tab.page"&gt;&lt;/div&gt;
      &lt;/tab&gt;
  &lt;/tabset&gt;
  
  JS:
  var TabsDemoCtrl = function ($scope) {
    $scope.tabs = [
      { title:"Tab 1", content:"Dynamic content 1" },
      { title:"Tab 2", content:"Dynamic content 2", active: true, 'new': true }
    ];
  
  };
  </code></pre>
  
  <p>So, what's left is making Angular add a class named <code>"new"</code> on the correct element based on <code>tabs</code> array definition above. Unfortunately, I failed to figure out how.</p>
  
  <p>As you can see I tried <code>ng-class="{new: tab.new}"</code> (commented in html code), but this essentially breaks all class features, producing incorrect <code>ng-class</code> atrribute when viewing it in Dev Tools:</p>
  
  <pre><code>ng-class="{new: tab.new} {active: active, disabled: disabled}"
  </code></pre>
  
  <p>Here's the <a href="https://plnkr.co/edit/rIM7gSMIM8OApaaLVOSA" rel="nofollow noreferrer">Plunkr</a>.</p>