Angular js - Using UI Bootstrap's Tab library only

Question

I'm using only the Tab component of UI Bootstrap.

https://github.com/angular-ui/bootstrap/tree/master/src/tabs

After including the above library and adding following code resulted nothing in the browser. There is no errors in console either.

var app = angular.module('app', ['ui.bootstrap.tabs']);

 <tabset justified="true">
    <tab heading="Justified">Justified content</tab>
    <tab heading="SJ">Short Labeled Justified content</tab>
    <tab heading="Long Justified">Long Labeled Justified content</tab>
  </tabset>

I've managed to get this work with full UI-Bootstrap library with same above code. I don't want to include the entire library as I'm using only the Tab module.

http://plnkr.co/edit/DCNry4vEcL2VrcP9lv9J?p=preview

Answer 1

You need to include the templates. @Fieldset has the right idea, just maybe not the clearest recommendation for solving the issue.

Plunker

If you are only including the tabs.js, make sure to add the templates separately. You can do this easily using the $templateCache script tags approach:

    <script type="text/ng-template" id="template/tabs/tabset.html">
      <div>
        <ul class="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>

    <script type="text/ng-template" id="template/tabs/tab.html">
      <li ng-class="{active: active, disabled: disabled}">
        <a href ng-click="select()" tab-heading-transclude>{{heading}}</a>
      </li>
    </script>