Tabs Directive with $scope

tab-directive-with-$scope.js

.directive('tabs', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: { },
    controller: ['$scope', function TabsController($scope) {
      var panes = $scope.panes = []
      $scope.select = function(pane) {
        angular.forEach(panes, function(p) {
          p.selected = false;
        });
        pane.selected = true;
      };

      this.addPane = function(pane) {
        if (panes.length === 0) {
          $scope.select(pane);
        }
        $scope.panes.push(pane);
      };
    }],
    templateUrl: 'tabs.html'
  };
})
.directive('tab', function() {
  return {
    require: '^^tabs',
    restrict: 'E',
    transclude: true,
    scope: { details: '<' },
    link: function(scope, element, attrs, tabsCtrl) {
      tabsCtrl.addPane(scope.details);
    },
    templateUrl: 'tab.html'
  };
});