angularjs bootstrap tabs using

Question

I want to achieve bootstrap tabs like in this example, using angularjs bootstrap - It contains directives tabbable and tabPane. It doesn't work, i have no idea how to get the ball rolling.

<tabbable>
    <tabPane title="first">
        <div ng-controller="FirstCtrl"></div>
    </tabPane>
    <tabPane title="tabbable">
        <div ng-controller="SecondCtrl"></div>
    </tabPane>
</tabbable>

app.js:

angular.module('orders_manage', ['orders_manage.services', 'bootstrap'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

$routeProvider
    .when('/first', { templateUrl:'/partials/first.html', controller:FirstCtrl})
    .when('/second', { templateUrl:'/partials/second.html', controller:SecondCtrl})

Answer 1

If you take a look at the source you'll find that these directives are restricted to class names: https://github.com/angular/angular.js/blob/v1.0.x/src/bootstrap/bootstrap.js#L54

Rewriting your example to use <div class="tabbable"> and <div class="tab-pane"> will fix the issue.

Answer 2

This plunk shows an example of what you are looking for. Original link found on the angularjs JsFiddle-Examples wiki .

Angular Bootstrap Tabbable with ng-view and url as current tab deep linking (Andy Joslin)

Also, depending on your use case, you may want to take a look at the Create Components section on the angularjs home page http://angularjs.org . The 'component.js' source code in that section shows example code to quickly get tabs working without angularjs bootstrap. You can use this example to build a custom solution if you need more control over the functionality.