title: Dynamically create directives from a loop
body: <p>I have a <code>main directive</code> that has an <code>array</code> on it's scope that contains data for constructing other <code>directives</code> that should be compiled and appended to the <code>main directive</code>.</p>
  
  <p>The problem is that when I iterate through that array I only get the data from the last element in array,
  so I can't properly bind respective data for each custom directive.</p>
  
  <p><a href="http://plnkr.co/edit/Of78TXfJfr8lmYLrTfOQ?p=preview" rel="nofollow">Plunker</a></p>
  
  <p>main directive : </p>
  
  <pre><code> angular.module('testApp')
     .directive('mainDirective', ["$compile", function ($compile) {
  
      return {
         template:   ' &lt;div&gt;&lt;p&gt;Main Directive &lt;/p&gt;&lt;div class="insertion-point"&gt;&lt;/div&gt;&lt;/div&gt;',
  
         link: function (scope, element, attributes, controller) {
  
            var insertionPoint = element.find('.insertion-point');
  
            angular.forEach(scope.demoObj.panels, function (value, index) {
  
  
                var directiveName = value.type;
  
                scope.value = value;
                var directiveString = "&lt;div " + directiveName + " panel-data=value &gt;&lt;/div&gt;";
  
                var compiledElement = $compile(directiveString)(scope);
  
                insertionPoint.append(compiledElement);
  
          });
      }
  
  
      }
  
  
  }]);
  </code></pre>
  
  <p>directive to be nested:</p>
  
  <pre><code> angular.module('testApp')
   .directive('nestedDirective', [function () {
  
      return {
  
         scope:{
           panelData:'='
         },
         template:' &lt;div&gt;&lt;p&gt;Nested Directive &lt;/p&gt;{{panelData.data.test}}&lt;/div&gt;'
      }
  }]);
  </code></pre>
  
  <p>data  looks like this:</p>
  
  <pre><code>                  $scope.demoObj = {
  
                panels:[
                  {
                      id:'unique_id_1',
                      type:'nested-directive',
                      data:{
                        test:'test 1'
                      }
                  },
                  {
                      id:'unique_id_2',
                      type:'nested-directive',
                      data:{
                        test:'test 2'
                      }
                  },
                  {
                      id:'unique_id_3',
                      type:'nested-directive',
                      data:{
                        test:'test 3'
                      }
                  }
  
              ]
          }
  </code></pre>
  
  <p>As far as I can understand , the compilation is not happening immediately in the <code>forEach</code> statement, that's why every directive gets the data from the object with the id <code>unique_id_3</code> (last element in array). Also all directives have isolated scope.</p>
  
  <p>edit: I understand that in forEach I need to add the value to the scope so I can <code>pass</code> it to the nested directive isolated scope, and I understand that when the loop finishes <code>scope.value</code>  will be the last <code>value</code> of the loop, but I was under the impression that compile will <code>immediately</code> pass the value to the nested directive and be done with it.</p>
  
  <p>So, when does the compilation happen?</p>
  
  <p>How can I circumvent this limitation?</p>