title: Precompiled templates strange effect
body: <p>I am testing idea of dynamically changing templates. I ended with sample code that oversimplifies
  whole process just to show the problem:</p>
  
  <pre><code>&lt;div ng-app="app" ng-controller="MyController"&gt;
      &lt;content-item ng-repeat="item in data"&gt;&lt;/content-item&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and JS:</p>
  
  <pre><code>var app = angular.module('app', []);
  
  app.controller('MyController', function ($scope) {
      $scope.data = ["heading1", "heading2"];
  });
  
  app.directive('contentItem', function ($compile) {
      var templates = [
          '&lt;h1&gt;{{item}}&lt;/h1&gt;',
          '&lt;h4&gt;{{item}}&lt;/h4&gt;'];
  
      var compiledTemplates = [];
  
      for (var i = 0, ii = templates.length; i &lt; ii; i++) {
          compiledTemplates.push($compile(templates[i]));
      }
  
      return {
          restrict: "E",
          replace: true,
          link: function (scope, element, attrs) {
  
              var template = templates[0];
              var link = $compile(template);
  
              //var link = compiledTemplates[0];
  
              element.append(link(scope));
          }
      };
  });
  </code></pre>
  
  <p>Hardcoded is number of template (0) just to simplify the code and compiledTemplates array is not used (next sample will use it)</p>
  
  <p>Effect the whole list of elements is rendered:</p>
  
  <p><strong>heading1</strong></p>
  
  <p><strong>heading2</strong></p>
  
  <p>OK. But I want to pre-compile the templates so compile process doesnt happen each time link function is called.</p>
  
  <p>So, If I use compiledTemplates I just need to comment first to lines in link function and uncomment fird line (comment in code above). In the end link function looks this time :</p>
  
  <pre><code>link: function (scope, element, attrs) {
  
                  var link = compiledTemplates[0];
  
                  element.append(link(scope));
              }
  </code></pre>
  
  <p>Not much of a difference (at least I cannot see the difference), but effect is :</p>
  
  <p><strong>heading 2</strong></p>
  
  <p>(if we have 10 items in list only last one would be rendered)</p>
  
  <p>Why? What am I missing?</p>
  
  <p>Here is JSFiddle: <a href="http://jsfiddle.net/yoorek/DcaVM/" rel="nofollow">http://jsfiddle.net/yoorek/DcaVM/</a></p>