title: template works fine whereas templateUrl not in angular component
body: <p><a href="https://toddmotto.com/angular-1-5-lifecycle-hooks" rel="nofollow noreferrer">code to create tabs component</a>
  Hi,I am learning angular component from this link ,the problem is when i tried to load from external files  instead of template it throws following error </p>
  
  <pre><code>angular.js:13708 TypeError: Cannot set property 'selected' of undefined
      at controller.selectTab (scr.js:47)
      at controller.$postLink (scr.js:50)
      at angular.js:9228
      at forEach (angular.js:329)
      at nodeLinkFn (angular.js:9225)
      at compositeLinkFn (angular.js:8510)
      at compositeLinkFn (angular.js:8513)
      at compositeLinkFn (angular.js:8513)
      at publicLinkFn (angular.js:8390)
      at angular.js:1756
  </code></pre>
  
  <p>here is the scr.js code </p>
  
  <pre><code>var tab = {
    bindings: {
      label: '@'
    },
    require: {
      tabs: '^^tabs'
    },
    transclude: true,
   template:['$templateCache',function($templateCache){
    return $templateCache.get('tab.html') 
    }
    ],
  
    controller: function () {
      this.$onInit = function () {
          this.tab = {
          label: this.label,
          selected: false
        };
        this.tabs.addTab(this.tab);
      };
    }
  };
  
  var tabs = {
      bindings: {
      selected: '@'
    },
    transclude: true,
     template:['$templateCache',function($templateCache){
    return $templateCache.get('tab.html') 
    }
    ],    
    controller: function () {
        this.$onInit = function () {
          this.tabs = [];
      };
      this.addTab = function addTab(tab) {
        this.tabs.push(tab);
      };
      this.selectTab = function selectTab(index) {
        for (var i = 0; i &lt; this.tabs.length; i++) {
          this.tabs[i].selected = false;
        }
        this.tabs[index].selected = true;
      };
      this.$postLink = function () {
          this.selectTab(this.selected);
        console.log(this.selected)
      };
    },
  
  };
  
  angular
      .module('app', [])
    .component('tab', tab)
    .component('tabs', tabs);
  </code></pre>
  
  <p>Here is html code:</p>
  
  <pre><code>    &lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"&gt;&lt;/script&gt;
  &lt;script src="scr.js"&gt;&lt;/script&gt;
  &lt;style&gt;
  * {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  body {
    font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: #111;
    margin: 0;
    padding: 0;
  }
  .tabs {
    margin: 25px;
    background: #fff;
  }
  .tabs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid #eee;
  }
  .tabs__list li {
    float: left;
  }
  .tabs__list li a {
    color: #444;
    display: block;
    text-decoration: none;
    padding: 10px 20px;
  }
  .tabs__content {
    padding: 10px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div ng-app="app"&gt;
    &lt;div&gt;
      &lt;tabs selected="2"&gt;
        &lt;tab label="Tab 1"&gt;
          Tab 1 contents!
         &lt;/tab&gt;
         &lt;tab label="Tab 2"&gt;
          Tab 2 contents!
         &lt;/tab&gt;
         &lt;tab label="Tab 3"&gt;
          Tab 3 contents!
         &lt;/tab&gt;
      &lt;/tabs&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>here are two template which i am trying to load in component tab.html and tabs.html respectively:</p>
  
  <pre><code>    &lt;div class="tabs__content" ng-if="$ctrl.tab.selected"&gt;
        &lt;div ng-transclude&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div class="tabs"&gt;
        &lt;ul class="tabs__list"&gt;
          &lt;li ng-repeat="tab in $ctrl.tabs"&gt;
            &lt;a href="" 
              ng-bind="tab.label" 
              ng-click="$ctrl.selectTab($index);"&gt;&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="tabs__content" ng-transclude&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>can any one please help me fix this,Thanks in advance</p>