AngularJS Advanced Tab Example

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.directive('advancedTab', function($compile){
  return {
    restrict: 'E',
    compile: function (element) {
      
      // Fetch each part in the original html
      var $title = element.find('title'),
          titleHtml = angular.copy($title.html());
          $content = element.find('content'),
          contentHtml = angular.copy($content.html());
          $template = '<div class="well"><div class="advanced-tab-title"></div><hr><div class="advanced-tab-content"></div></div>';
  
      
      return function (scope, elm, attrs) {
        var rendered = angular.element($template),
            $renderedTitle = rendered.find('.advanced-tab-title'),
            $renderedContent = rendered.find('.advanced-tab-content');
            
        // Compose final html
        $renderedTitle.append(titleHtml);
        $renderedContent.append(contentHtml);
        elm.empty();
        elm.append(rendered);
        
        // Activate angular compile on each part
        $compile($renderedTitle)(scope);
        $compile($renderedContent)(scope)
      };
    }
  };
});


angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];
 
        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }
 
        this.addPane = function(pane) {
          if (panes.length == 0) $scope.select(pane);
          panes.push(pane);
        }
      },
      template:
        '<div class="tabbable">' +
          '<ul class="nav nav-tabs">' +
            '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
              '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
            '</li>' +
          '</ul>' +
          '<div class="tab-content" ng-transclude></div>' +
        '</div>',
      replace: true
    };
  }).
  directive('pane', function() {
    return {
      require: '^tabs',
      restrict: 'E',
      transclude: true,
      scope: { title: '@' },
      link: function(scope, element, attrs, tabsCtrl) {
        tabsCtrl.addPane(scope);
      },
      template:
        '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
        '</div>',
      replace: true
    };
  })

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script data-require="angular.js@1.2.2" data-semver="1.2.2" src="http://code.angularjs.org/1.2.2/angular.js"></script>
    <script data-require="angular-ui-bootstrap@0.6.0" data-semver="0.6.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.min.js"></script>
    <script data-require="angular-animate@1.2.1" data-semver="1.2.1" src="http://code.angularjs.org/1.2.1/angular-animate.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl" class="container">
    <h4>Advanced tab example</h4>
    <advanced-tab>
      <title>Hello {{name}}</title>
      <content>
        <p>Content 1</p>
        <tabset>
          <tab heading="Tab1">Tab content one</tab>
          <tab heading="Tab2">Tab content two</tab>
        </tabset>
      </content>
    </advanced-tab>
    
  </body>

</html>

/* Put your css in here */