title: How to dynamically load directive into page
body: <p>I have an html file with a controller and a directive with a template url. I want to load/compile the directive conditionally in the controller:</p>
  
  <h2>Controller:</h2>
  
  <pre><code>app.controller('TestController', function TestController($http, $scope, $compile) {
  
  $scope.loadData = function (pageId) {
      var pUrl = &lt;some url&gt;
      $http({
          method: 'GET',
          url: pUrl
      }).success(function (data, status) {
          $scope.pData = data;
          var htm = '&lt;test-directive&gt;&lt;/test-directive&gt;';
          var elm = angular.element("#id").append(htm);
          $compile(elm)($scope);
      }).error(function (data, status) {
          alert('error');
      });
  };
  
  $scope.loadData();
  
  });
  </code></pre>
  
  <h2>Directive:</h2>
  
  <pre><code>'use strict';
  
  app.directive('testdirective', function ($http) {
  var uDirective = {};
  
  uDirective.restrict = 'E';
  uDirective.templateUrl = 'js/directives/testdirective.html';
  uDirective.controller = function ($scope, $element, $attrs) {
  $scope.showDirectiveData();
  
      $scope.showDirectiveData = function () {
          $scope.directiveDataCollection = &lt;get data&gt;;
      };
  };
  
  uDirective.compile = function (element, attributes) {
      // do one-time configuration of element.
  
      var linkFunction = function ($scope, element, atttributes) {
      };
  
      return linkFunction;
  };
  
  return uDirective;
  });
  </code></pre>
  
  <h2>Template used in Directive</h2>
  
  <pre><code>&lt;div&gt;
     &lt;div ng-repeat="directiveData in directiveDataCollection"&gt;
        &lt;span&gt;&lt;h4&gt;{{directiveData.Title}}&lt;/h4&gt;&lt;/span&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How do i get to compile the code in the TestController, load the directive dynamically, and finally load the content and append the content in scope?</p>