**EDIT** Here is my [plunk](http://plnkr.co/edit/yBeaGdlmMLPagF2rqQUF?p=preview)

Here are the two lines in the myPane directive that causes it to break.

```
require: '^myMainTabs',  //Comment out this line and uncomment below to break.
//require: ['^myMainTabs', '^mySubTabs'],  //Comment out this line and uncomment above to fix.

```

I'd like to be able to use the same 'myPane' directive for both of these tabs, if that's possible.

**End EDIT**

I'm looking at the AngularJs Developer Guid at [this site](https://docs.angularjs.org/guide/directive). At the bottom I found something I'd like to use for the base for tabs.

Here is the code found at that page.

```
.directive('myTabs', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    controller: 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);
      };
    },
    templateUrl: 'my-tabs.html'
  };
})
.directive('myPane', function() {
  return {
    require: '^myTabs',
    restrict: 'E',
    transclude: true,
    scope: {
      title: '@'
    },
    link: function(scope, element, attrs, tabsCtrl) {
      tabsCtrl.addPane(scope);
    },
    templateUrl: 'my-pane.html'
  };
});

```

What I've done is applied my company's theme to this and now it looks like tabs and works great!

However, we have two or three different tab types, but in the end, they could all use the same 'myPane' directive. I tried changing the require in the myPane directive to an array of directives, such as:

```
require: ['^tabType1', '^tabType2']

```

but that seems to require both types of directives to be required.

Is there a way for a directive to be shared by other directives?

Something like this:

```
.directive('myMainTabs', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    controller: 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);
      };
    },
    templateUrl: 'my-main-tabs.html'
  };
})
.directive('mySubTabs', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {},
    controller: 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);
      };
    },
    templateUrl: 'my-sub-tabs.html'
  };
})
.directive('myPane', function() {
  return {
    require: ['^myMainTabs','^mySubTabs'] //Doesn't work
    restrict: 'E',
    transclude: true,
    scope: {
      title: '@'
    },
    link: function(scope, element, attrs, tabsCtrl) {
      tabsCtrl.addPane(scope);
    },
    templateUrl: 'my-pane.html'
  };
});

```

Thanks,
Duane