Example of using $postLink event

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@*" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script data-require="jquery@*" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.5.9" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script data-require="angular-route@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="mainApp">
      <ng-view></ng-view>
    </div>
  </body>

</html>

// Code goes here
let mainApp = angular.module("mainApp", ["ngRoute"]).config(function($routeProvider) {
  $routeProvider.
  when('/', {
    template: '<my-container></my-container>'
  })
});

mainApp.component("myContainer", {
  templateUrl: "myContainer.html",
  
});

var tab = {
  bindings: {
    label: '@'
  },
  require: {
    tabs: '^^'
  },
  transclude: true,
  /*template: `<div class="tabs__content" ng-if="$ctrl.tab.selected">
      <div ng-transclude></div>
    </div>`,*/
    templateUrl:"tab.html"
  controller: function () {
    this.$onInit = function () {
      this.tab = {
        label: this.label,
        selected: false
      };
      
      // this.tabs === require: { tabs: '^^' }
      this.tabs.addTab(this.tab);
    };
  }
};

var tabs = {
  bindings: {
    selected: '@'
  },
  transclude: true,
  /*template: `<div class="tabs">
      <ul class="tabs__list">
        <li ng-repeat="tab in $ctrl.tabs">
          <a href=""
            ng-bind="tab.label"
            ng-click="$ctrl.selectTab($index);"></a>
        </li>
      </ul>
      <div class="tabs__content" ng-transclude>
      </div>
    </div>`,*/
    templateUrl:"tabs.html",
  controller: function () {
    this.$onInit = function () {
      console.log("$onInit");
      this.tabs = [];
    };
    this.addTab = function addTab(tab) {
      console.log("addTab");
      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;
    };
    this.$postLink = function () {
      console.log("$postLink. nr of tabs added: " + this.tabs.length);
      
      this.selectTab(this.selected);
    };
  }
};

mainApp
  .component('tab', tab)
  .component('tabs', tabs);

/* Styles go here */
div.item{
  margin-left:100px;
  height:100px;
}

<tabs selected="1">
  <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 class="tabs">
      <ul class="tabs__list">
        <li ng-repeat="tab in $ctrl.tabs">
          <a href=""
            ng-bind="tab.label"
            ng-click="$ctrl.selectTab($index);"></a>
        </li>
      </ul>
      <div class="tabs__content" ng-transclude>
      </div>
    </div>

<div class="tabs__content" ng-if="$ctrl.tab.selected">
      <div ng-transclude></div>
    </div>