Quero criar as seguintes guias com a interface do usuário angular:

guias http://gyazo.com/1a0153506b386d4746c108c420f7ae1b.png

Então, estou adicionando os estilos baseados nos nomes / marcação das classes do Bootstap:

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

(Como você pode ver, eu preciso compensar o preenchimento<a> um pouco depois que eu adicionei texto super-script, caso contrário, ele é empurrado para baixo.)

Em seguida, tenho a seguinte marcação e código emhtml/js arquivos:

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

};

Então, o que resta é fazer Angular adicionar uma classe chamada"new" no elemento correto com base emtabs definição de matriz acima. Infelizmente, não consegui descobrir como.

Como você pode ver, eu tenteing-class="{new: tab.new}" (comentado em código html), mas isso essencialmente quebra todos os recursos da classe, produzindo incorretamenteng-class Atributo ao visualizá-lo no Dev Tools:

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

Aqui está oPlunkr.