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:

.nav-tabs > li.new > a {
  padding-top: 5px;
}
.nav-tabs > .new > a:after {
  content: "NEW";
  color: indianred;
  font-size: 10px;
  vertical-align: super;
  padding-left: 2px;
}

(As you can see I need to compensate padding on <a> a bit after I added super-scripted text, otherwise it is pushed down.)

Next, I have the following markup & code in html/js files:

HTML:
<tabset>
    <tab ng-repeat="tab in tabs" heading="{{ tab.title }}" active="tab.active" ><!-- ng-class="{new: tab.new}"-->
        <div ng-include="tab.page"></div>
    </tab>
</tabset>

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 }
  ];

};

So, what's left is making Angular add a class named "new" on the correct element based on tabs array definition above. Unfortunately, I failed to figure out how.

As you can see I tried ng-class="{new: tab.new}" (commented in html code), but this essentially breaks all class features, producing incorrect ng-class atrribute when viewing it in Dev Tools:

ng-class="{new: tab.new} {active: active, disabled: disabled}"

Here's the Plunkr.

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:

 <tabset>
    <tab ng-repeat="tab in tabs">
    <tab-heading ng-class="{new:tab.new}">{{tab.title}}</tab-heading>
        <div ng-include="tab.page"></div>
    </tab>
</tabset>

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.