title: AngularJS component with $compile loses $scope
body: <p>I have a directive that loads some AngularJS (v1.2.16) components dynamically. It requests a list of components from a WebAPI, then loads the files it is told to, and finally uses <code>$compile</code> to compile the components.</p>
  
  <p>However, the components lose their <code>$scope</code> after the initial load! If I have an <code>ng-click</code> event in the component, it flat out refuses to be fired!</p>
  
  <p>This is my directive inside my main JS file:</p>
  
  <pre><code>var myApp = angular.module(.......);
  
  myApp.directive('components', function($compile, $http) {
      return {
          restrict: 'A',
          link: function (scope, element) {
              $http.get('myapi/getListOfComponents').success(function(components) {
  
                 var scripts = Array();
                 var templates = Array();
  
                 angular.forEach(components, function (component, key) {
                     if (component.JavaScript !== null) {
                         // This is the path to the JS file to dynamically load
                         scripts.push(widget.JavaScript);
                     }
                 });
  
                 // Load the JS file for all the components
                 // I'm using the dynamic loader found here: https://github.com/ded/script.js (it's old, but it works)
                 $script(scripts, function () {
                     angular.forEach(widgets, function (widget, key) {
                         templates.push(
                             // Get the raw HTML contents of the component
                             $http.get(widget.Template).success(function (componentHtmlContent) {
                                 element.append('&lt;div class="component"&gt;' + componentHtmlContent + '&lt;/div&gt;');
                                 $compile(element.contents())(scope);
                             }));
                     });
                 });
              });
          }
      }
  });
  </code></pre>
  
  <p>And an example component's template:</p>
  
  <pre><code>&lt;div ng-controller="myComponentController"&gt;
      &lt;h2&gt;{{MyHeading}} - {{MyInlineFunction()}} - {{SomeValue}}&lt;/h2&gt;
      &lt;button ng-click="MyClickFunction()"&gt;Button&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the component's script</p>
  
  <pre><code>serviceWebApp.controllerProvider('myComponentController', function ($scope, $http) {
  
      $scope.SomeValue = "Foo";
  
      $http.get('/myapi/getsomedata').success(function (data) {
          $scope.MyHeading = data;
      });
  
      $scope.MyInlineFunction = function() {
          return "SomeInlineValue";
      }
  
      $scope.MyClickFunction = function() {
          alert('Something was clicked');
      }
  });
  </code></pre>
  
  <p>When the page loads, both <code>MyInlineFunction</code> and the <code>$http.get</code> are called just fine, and all the bindings in the template (<code>{{MyHeading}} - {{MyInlineFunction()}} - {{SomeValue}}</code>) get the correct values.</p>
  
  <p>The button, on the other hand, refuses to work. <code>MyClickFunction</code> is never called.</p>
  
  <p>I've also tried to look at the contents of that controller's scope using the following command in the browser developer console:</p>
  
  <p><code>angular.element($("div[ng-controller~='myComponentController']")).scope()</code></p>
  
  <p>The scope returned from this does <strong>not</strong> contain <code>SomeValue</code>, or the other values/functions defined in the scope.</p>
  
  <p>So it seems that the <code>$compile</code> works only one time, and fails to keep track of the scope.</p>
  
  <p>What is going on here, and how can I fix it?</p>