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

@TyndieRock is right that you can't, as far as I'm aware, apply classes to bootstrap-ui tabs. Any ng-class is stripped and directly adding a class causes bad behavior and it blocks any attempt to inject into it.

I did see an issue posted on github asking for custom css support. So maybe someday.

@TyndieRock's solution gets you closer but doesn't get you all the way. Kudos for finding tab-heading. Although his syntax is just slightly off.

Here's what I think you'd want:

 
    
    {{tab.title}}
        

    

This will let style the text. But it doesn't work so well for your css content.

You might want to do your own custom tabs. It is a hassle but that'll give you the control you're looking for.