title: angularjs: scope issue in directive when using $compile
body: <p>I'm having an issue with scope lost when using $compile to create a dynamic template for my directive. See the code below (trimmed for clarity) :</p>
  
  <pre><code>(function () {
  'use strict';
  
  angular.module('cdt.dm.directives').directive('serviceSources', ['$http', '$templateCache', '$compile', '$parse',
  function ($http, $templateCache, $compile, $parse) {
      return {
          restrict: 'E',
          replace: true,
          scope: {
              type: '=',
              sources: '='
          },
          link: function (scope, element, attr) {
              var template = 'Template_' + scope.type + '.html';
  
              $http.get(template, { cache: $templateCache }).success(function (tplContent) {
                  element.replaceWith($compile(tplContent)(scope));
              });
  
              $compile(element.contents())(scope);
          }
      }
  }
  ])
  })();
  </code></pre>
  
  <p>that works and the html template is loaded. </p>
  
  <p>the html template looks like:</p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;File&lt;/th&gt;           
      &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody data-ng-reapeat="src in sources"&gt;
      &lt;tr&gt;
          &lt;td&gt;{{src.fileName}}&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>sources is an array with two elements. In the scope of the directive, it is definitely correct, but in the template, the ng-repeat is not working (I guess because sources is undefined at this stage).</p>
  
  <p>Does someone know what I'm doing wrong ? </p>