title: Injecting angular element from controller but not working as directive
body: <p>My problem is that a html element needs to be replaced with a directive on event call. So i am calling a function in my controller on click event and appending the angular element at the desired position, that angular element is a directive so i need to do something to make it recognizable as directive. I have tried $compile but that doesn't work at controller level.</p>
  
  <p><strong>My controller Code</strong> </p>
  
  <pre><code>angular.element(document.body).append("&lt;annotation&gt;&lt;/annotation&gt; ");
  </code></pre>
  
  <p><strong>My Directive code</strong></p>
  
  <pre><code>app.directive("annotation", function($compile){
  
  var linker = function(scope,element, attrs){
      element.html("Done "+attrs.content);
  
      if(attrs.content){
  
          $(element).tooltipster({
              content: $("&lt;button class=\"btn btn-primary\"&gt;Highlight&lt;/button&gt;"),
              animation: 'fade',
              delay: 200,
              interactive: true,
              theme: 'tooltipster-default',
              touchDevices: false,
              trigger: 'hover'
            });
      }
  
      $compile(element)(attrs);
  }
  
  return {
      restrict : "E",
      template: '&lt;div class="highlightor"&gt;&lt;/div&gt;',
      replace : true,
      link : linker,
      scope: {
          content: "="
      }
  };
  </code></pre>
  
  <p>});</p>