title: AngularJS - $compile is not a function
body: <p>I have been trying to figure this out for quite a while, hopefully someone can point out what is wrong.</p>
  
  <p>I am trying to compile the HTML template because it does not call the function <code>removeAllImages()</code>. According to the console log for scope, I can see that the function is there.</p>
  
  <p>Here is my directive:</p>
  
  <pre><code>musicianMarketplace.directive('slideshowImagesManage', ['$q', 'Auth', '$compile', 
    function ($q, Auth, $http, $location, $compile) {
      return {
          restrict: 'E',
          // scope: {
          //     slideshowImages: '=',
          //     // removeAllImages: '&amp;',
          //     // removeImage: '&amp;'
          // },
          // transclude: true,
          link: function ($scope, elem, attr) {
  
              console.log($scope);
  
              // slideshowImages = attr.slideshowImages;
              // removeAllImages = attr.removeAllImages;
              // removeImage = attr.removeImage;
  
              function updateImages() {
                  $q.when($scope.slideshowImages).then(function (slideshowImages) {
                      elem.empty();
                      var html = '';
                      if (slideshowImages != null) {
  
                          html += '&lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"&gt;';
  
                          html += '&lt;div&gt;&lt;a ng-href="" ng-click="removeAllImages(' + 
                                   Auth.getCurrentUser().id + 
                                  ');"&gt;Remove All Images&lt;/a&gt;&lt;/div&gt;';
  
                          $.each(slideshowImages, function (key, value) {
                              if (value.fd || value[0].fd) {
                                  html += '&lt;div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"&gt;';
                                  if (value.fd) {
                                      html += '&lt;img ng-src="' + S3STORE + '/' + value.fd + 
                                              '" width="100%" alt="' + value.fd + '" /&gt;';
                                      html += '&lt;a ng-href="" ng-click="removeImage({image: ' + 
                                              value.fd + '})"&gt;Remove&lt;/a&gt;';
                                  } else if (value[0].fd) {
                                      html += '&lt;img ng-src="' + S3STORE + '/' + value[0].fd + 
                                              '" width="100%" alt="' + value[0].fd + '" /&gt;';
                                      html += '&lt;a ng-href="" ng-click="removeImage({image: ' + 
                                              value[0].fd + '})"&gt;Remove&lt;/a&gt;';
                                  }
                                  html += '&lt;/div&gt;';
                              }
                          });
  
                          html += '&lt;/div&gt;';
  
                          html = $compile(html)(scope);
  
                          elem.html(html);
  
                      } else {
                          html = "NO IMAGES";
                          elem.html(html);
                      }
                  });
              }
  
              updateImages();
  
              $scope.$watch(attr.slideshowImages, function (newVal, oldVal) {
                  if (newVal != oldVal) {
                      slideshowImages = newVal;
                      updateImages();
                  }
              });
  
              $scope.$on('$destroy', function () {
                  updateImages();
              });
  
          }
      };
  }]);
  </code></pre>
  
  <p>As you can see I have tried with and without isolated scope. Everything else works except the function call.</p>
  
  <p>The function itself I have just a console log:</p>
  
  <pre><code>$scope.removeAllImages = function (user) {
      console.log("HERE");
  }
  </code></pre>
  
  <p>I have tried this HTML for isolated scope:</p>
  
  <pre><code>&lt;slideshow-images-manage 
     slideshow-images="slideshowImages" 
     remove-all-images="removeAllImages(user)" 
     remove-image="removeImage(image)"&gt;
  &lt;/slideshow-images-manage&gt;
  </code></pre>
  
  <p>and this HTML for non-isolated scope:</p>
  
  <pre><code>&lt;slideshow-images-manage&gt;&lt;/slideshow-images-manage&gt;
  </code></pre>