<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TabsDemoCtrl">
<tabs>
<pane heading="Static title" active="data.static">Static content</pane>
<pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">{{pane.content}}</pane>
</tabs>
<div class="row-fluid">
<button class="btn" ng-click="data.static = true">Select Static tab {{data.static}}</button>
<button class="btn" ng-click="panes[0].active = true">Select second tab</button>
<button class="btn" ng-click="panes[1].active = true">Select third tab</button>
</div>
</div>
</body>
</html>
angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
$scope.data = {static: true}
$scope.panes = [
{ title:"Dynamic Title 1", content:"Dynamic content 1" },
{ title:"Dynamic Title 2", content:"Dynamic content 2" }
];
};