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

Question

How can I replace or add a new class on UI-Bootsrap's Tab Nav. I'm expecting something 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 the following but, it's adding the class to the 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>

Answer 1

Ok, what you wan't to do is not supported by the ui bootstrap module, so we need to extend the module to get the requested behavior. To do that we will use decorators:

.config(function($provide) {

  // This adds the decorator to the tabset directive 
  // @see https://github.com/angular-ui/bootstrap/blob/master/src/tabs/tabs.js#L88 
  $provide.decorator('tabsetDirective', function($delegate) {

    // The `$delegate` contains the configuration of the tabset directive as 
    // it is defined in the ui bootstrap module.
    var directive = $delegate[0];

    // This is the original link method from the directive definition
    var link = directive.link;

    // This sets a compile method to the directive configuration which will provide
    // the modified/extended link method
    directive.compile = function() {

      // Modified link method
      return function(scope, element, attrs) {

        // Call the original `link` method
        link(scope, element, attrs);

        // Get the value for the `custom-class` attribute and assign it to the scope.
        // This is the same the original link method does for the `vertical` and ``justified` attributes
        scope.customClass = attrs.customClass;
      }
    }

    // Return the modified directive
    return $delegate;
  });
});

This takes the old link method of the tabset directive and wraps it with an custom method that in addition to the old method also binds the value of the custom-class attribute to the scope. Second thing we need to do is overriding the template to actually use the scope.customClass parameter:

There are multiple ways to this either use the $templateProvider or maybe simpler way use a <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