title: Looping through nested directive in angularjs
body: <p>I'm new with angular and trying to do some directives nesting, but having some problems.</p>
  
  <p>Here is my code : </p>
  
  <pre><code>module.controller("TimelineController", ["$scope", "$compile", function ($scope, $compile) {
  
      $scope.text = "ohoh";
      $scope.elements = ["12", "13"];
  
      console.log("Timeline Controller", arguments);
  
  }]);
  
  module.directive('timeline', function() {
      return {
          restrict: 'E',
          transclude: true,
          scope: true,
          controller : "TimelineController",
          link: function(scope, element, attrs, controller) {
              console.log("linking timeline", arguments);
          },
          templateUrl:'templates/directives/timeline.html',
          replace: true
      };
  });
  
  module.directive('timelineEvent', function() {
      return {
          restrict: 'E',
          transclude: true,
          scope: true,
          // controller : "TimelineController",
          link: function(scope, element, attrs/*, controller*/) {
              console.log("linking element", arguments);
          },
          templateUrl:'templates/directives/timeline_element.html',
          replace: false
      };
  });
  </code></pre>
  
  <p>my templates :</p>
  
  <p>timeline.html : </p>
  
  <pre><code>&lt;div class="timeline"&gt;
      &lt;p&gt;
          timeline {{text}}
      &lt;/p&gt;
  
      &lt;div ng-repeat="element in elements"&gt;
          - event {{element }}
          &lt;timeline-event ng-model="{{element}}"/&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>timeline_element.html :</p>
  
  <pre><code>&lt;div class="element"&gt;
      timeline element o/ \o
  &lt;/div&gt;
  </code></pre>
  
  <p>my index.html :</p>
  
  <pre><code>[...]
  &lt;body&gt;
  
      &lt;timeline&gt;&lt;/timeline&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>And the unexpected result : </p>
  
  <pre><code>timeline ohoh
  
  - event 12
  - event 13
  timeline element o/ \o
  </code></pre>
  
  <p>The expected result would be of course :</p>
  
  <pre><code>timeline ohoh
  
  - event 12
  timeline element o/ \o
  - event 13
  timeline element o/ \o
  </code></pre>
  
  <p>Why would the ng-repeat execute successfully, but the nested directive call only execute once? Is it not supposed to be able to use directives in loops?</p>