Edit in JSFiddle

function tab() {
	return {
  	restrict: 'E',
    scope: {
    	label: '@'
    },
    require: '^tabs',
    transclude: true,
    template: `
    	<div class="tabs__content" ng-if="tab.selected">
      	<div ng-transclude></div>
      </div>`,
    link: function ($scope, $element, $attrs, $ctrl) {
    	$scope.tab = {
      	label: $scope.label,
      	selected: false
      };
    	$ctrl.addTab($scope.tab);
    }
  }
}

function tabs() {
    return {
      restrict: 'E',
      scope: {},
      transclude: true,
      controller: function () {
      	this.tabs = [];
        this.addTab = function addTab(tab) {
        	this.tabs.push(tab);
        };
        this.selectTab = function selectTab(index) {
          for (var i = 0; i < this.tabs.length; i++) {
            this.tabs[i].selected = false;
          }
        	this.tabs[index].selected = true;
        };
      },
      controllerAs: 'tabs',
      link: function ($scope, $element, $attrs, $ctrl) {
      	$ctrl.selectTab($attrs.active || 0);
      },
      template: `
      	<div class="tabs">
        	<ul class="tabs__list">
          	<li ng-repeat="tab in tabs.tabs">
            	<a href="" ng-bind="tab.label" ng-click="tabs.selectTab($index);"></a>
            </li>
          </ul>
        	<div class="tabs__content" ng-transclude></div>
        </div>
      `
    };
}

angular
	.module('app', [])
  .directive('tab', tab)
  .directive('tabs', tabs);
<div ng-app="app">
  <div>
    <tabs active="0">
      <tab label="Tab 1">
        Tab 1 contents!
       </tab>
       <tab label="Tab 2">
        Tab 2 contents!
       </tab>
       <tab label="Tab 3">
        Tab 3 contents!
       </tab>
    </tabs>
  </div>
</div>