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

This issue was driving me mad, so here is what i did to have custom tab heading styling. Works for Angular >= 1.1.5 as it is the only one to have ternary operator in expressions.

One needs to target the element and not tab heading. Unfortunatelly ng-class will not work and get mangled together with other ng-class directives from the templates.

If you try to target the tab heading element you will find that there is not much you can do with it. There are no parent selectors in CSS so there is no way to reach that anchor tag where most of the action is going on.

So to have the cookie and eat it: 1) have your styles target descending anchor tag that gets generated by bootstrap tab directive

2) apply the class using this obscure syntax:

 
        
            
CONTENT

Then it all works as expected and proper classes are added to the