Panel Directive For angularjs

panel

 
    /*<tabs>  //expalme
      <pane title="First Tab"> 
        <div><h4>This is the content of the first tab.</h4></div> 
      </pane> 
      <pane title="Second Tab"> 
        <div>This is the content of the second tab.</div> 
      </pane> 
    </tabs>
    */
    // tabs
    directives.directive('tabs', function() {
    	return {
    		restrict: 'E',
    		transclude: true,
    		scope: {},
    		controller: ["$scope", function($scope) {
    			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
    	}
    });

    // panes
    directives.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
    	}
    });