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