title: Angular 1.5 component inside ng-repeat, template function run just once
body: <p>I tried to use angular component replacing directive for creating component (a data table).
  I want to use the component inside of ng-repeat like:</p>
  
  <pre><code>&lt;div ng-repeat='item in items'&gt;
  &lt;my-datatable&gt;&lt;/my-datatable&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The my-datatable component code look like this:</p>
  
  <pre><code> angular.module('App').component('myDatatable', {
          bindings: {
              ctrl: '=?',
              datasource: '=?'
          },
          bindToController: true,
          controllerAs: 'dataTable',
          template: function(){},
          controller: function(){}
      });
  </code></pre>
  
  <p>First problem:
  1. template function is not runnig for every instance of my-datatable component. 
  That mean, if inside my-datatable I have other components generated based by an unique Id of my-datatable (which can be create only in controller), it's difficult to write that code.
  2. The nested isolate scope, create o much too long chains of $parent, for make a reference to some scope variable, something like this (if I use two nested my-datatable's): </p>
  
  <pre><code> ng-click="$parent.$parent.$parent.$parent.$parent.$parent.$parent.$parent.select($parent.$parent.$parent.$parent.dataItem,dataItem)"
  </code></pre>
  
  <p>So, my question is:
  It is a way to avoid this problems using angular component?</p>
  
  <p>Writing controls code with directive without isolate scope, I don't have this problems. That why I want to change my code for all angular components as directives.</p>
  
  <p>I start to change may component into directive, and I remember few things:</p>
  
  <ul>
  <li>For long chains of $parent.$parent..., I create in component controller a variable $parent with reference for parent scope of component, so if I need a reference inside component to outside scope, I can use: dataTable.$parent.</li>
  <li>The good thing for isolate scope, it's I can destroy component and recreate, very simple and clean ( all the watchers are removed when I destroyed the isolate scope), which is not possible with directive way with no isolate scope.</li>
  </ul>
  
  <p>That mean,it remain only the problem to generate unique id for each component instance in template function. <strong>In other words: how to run template function on each instance of component.</strong></p>
  
  <p>For exemplify:
  <a href="https://jsfiddle.net/bogdanim36/t3gmzb6z/3/" rel="nofollow noreferrer">https://jsfiddle.net/bogdanim36/t3gmzb6z/3/</a></p>
  
  <p>And made some tests and I discover that it's happen the same with directive inside ng-repeat: template function is not running for every instance of component.</p>