AngularJS tabs

<!DOCTYPE html>
<html>
  <head>
    <script src="//code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
    <script src="//code.jquery.com/jquery.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap-theme.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="myApp">
    <tabs>
      <pane title="Tab 1">Tab 1 Content</pane>
      <pane title="Tab 2">Tab 2 Content</pane>
      <pane title="Tab 3">Tab 3 Content</pane>
    </tabs>  
  </body>

</html>

angular
  .module('myApp', [])
    .directive('tabs', function() {
      return {
        restrict: 'E',
        transclude: true,
        template: '<ul id="myTab" class="nav nav-tabs">' +
                  '<li ng-class="{active: activeTab == tab}" ng-repeat="tab in tabs"><a ng-click="setActive(tab)">{{tab}}</a></li>' +
                  '</ul>' + 
                  '<div class="tab-content" ng-transclude></div>',
        controller: function($scope) {
          $scope.tabs = [];
          $scope.activeTab = '';
          
          $scope.setActive = function(tab) {
            $scope.activeTab = tab;
          };
          
          this.register = function(tabName) {
            $scope.tabs.push(tabName);
            if (!$scope.activeTab) {
              $scope.setActive(tabName);
            }
          };
          
          this.isActive = function(tabName) {
            return tabName == $scope.activeTab;
          };
        }
      }  
    })
  .directive('pane', function() {
    return {
      restrict: 'E',
      require: '^tabs',
      template: '<div class="tab-pane" ng-show="isActive(title)" ng-transclude></div>',
      transclude: true,
      scope: {
        title: '@'
      },
      link: function(scope, element, attrs, tabsController) {
        tabsController.register(scope.title);
        scope.isActive = function(tabName) {
          return tabsController.isActive(tabName);
        };
      }
    };
  });