component-implementation.js

.component('tabs', {
  transclude: true,
  controllerAs: 'tabs',
  controller: [function TabsController() {
    var tabs = this;
    var panes = tabs.panes = []
    tabs.select = function(pane) {
      angular.forEach(panes, function(p) {
        p.selected = false;
      });
      pane.selected = true;
    };
    tabs.addPane = function(pane) {
      if (panes.length === 0) {
        tabs.select(pane);
      }
      tabs.panes.push(pane);
    };
  }],
  templateUrl: 'tabs.html'
})
.component('tab', {
  require: {
    tabsCtrl: '^tabs'
  },
  transclude: true,
  bindings: {
    details: '<'
  },
  controllerAs: 'tab',
  controller: function() {
    var tab = this
    tab.$onInit = function () {
      tab.tabsCtrl.addPane(tab.details);
    } 
  },
  templateUrl: 'tab.html'
});