javascript - AngularJs - Adding Custom class on UI-Bootstrap's Tab -

how can replace or add new class on ui-bootsrap's tab nav. i'm expecting like,

<ul class="my-custom-class" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude="">        <li ng-class="{active: active, disabled: disabled}" heading="justified" class="ng-isolate-scope">             <a href="" ng-click="select()" tab-heading-transclude="" class="ng-binding">justified</a>        </li>         .....           </ul>  

i've tried following but, it's adding class parent,

<tabset justified="true" class="tab-nav">        <tab heading="justified">justified content</tab>        <tab heading="sj">short labeled justified content</tab>        <tab heading="long justified">long labeled justified content</tab> </tabset> 

ok, wan't not supported ui bootstrap module, need extend module requested behavior. use decorators:

.config(function($provide) {    // adds decorator tabset directive    // @see https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js#l88    $provide.decorator('tabsetdirective', function($delegate) {      // `$delegate` contains configuration of tabset directive      // defined in ui bootstrap module.     var directive = $delegate[0];      // original link method directive definition     var link = directive.link;      // sets compile method directive configuration provide     // modified/extended link method     directive.compile = function() {        // modified link method       return function(scope, element, attrs) {          // call original `link` method         link(scope, element, attrs);          // value `custom-class` attribute , assign scope.         // same original link method `vertical` , ``justified` attributes         scope.customclass = attrs.customclass;       }     }      // return modified directive     return $delegate;   }); }); 

this takes old link method of tabset directive , wraps custom method in addition old method binds value of custom-class attribute scope. second thing need overriding template use scope.customclass parameter:

there multiple ways either use $templateprovider or maybe simpler way use <scrip type="text/ng-template">:

  <script id="template/tabs/tabset.html" type="text/ng-template">     <div>       <ul class="{{customclass}} nav nav-{{type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>       <div class="tab-content">         <div class="tab-pane" ng-repeat="tab in tabs" ng-class="{active: tab.active}" tab-content-transclude="tab">         </div>       </div>     </div>   </script> 

plunker: http://plnkr.co/edit/m3mgepy6rfguuda2a2n7?p=preview