Angular-UI Tabs: add class to a specific tab

Question

I want to create the following tabs with Angular UI:

_{(source: gyazo.com)}

So, I\'m adding the styles based on Bootstap\'s class names/markup:

Answer 1

I'm not sure that you can apply ng-class to tabs like that. After trying and failing I decided to look at the bootstrap-ui source for tabs and made an interesting discovery related to the tab heading attribute. Apparently you can put html in the heading section if you place the tab-heading as a child to a tab element.

Check out the tabheading directive in here.

This is the example they show:

  
    HTML in my titles?!
    And some content, too!
  
  
     Icon heading?!?
    That's right.
  

In your case I think you might be able to do something like this to get the same effect:

    {{tab.title}} new