title: Angular directive doesn't work for elements added to the DOM by jquery plugin
body: <p>I'm creating a fall back image directive that looks like this <a href="http://plnkr.co/edit/wxy4Sp2K02iXoQNsvkah" rel="nofollow">http://plnkr.co/edit/wxy4Sp2K02iXoQNsvkah</a></p>
  
  <pre><code>angular.module('directives').directive('myDirective', function() { 
     return {
       restrict: 'C',
  
       link: function(scope, element, attrs) {
         console.log('linking');
       }
     }
  });
  </code></pre>
  
  <p>My directive doesn't work for elements that are added to the DOM by the typeahead.js plugin (<a href="https://github.com/twitter/typeahead.js" rel="nofollow">https://github.com/twitter/typeahead.js</a>). </p>
  
  <pre><code>&lt;div class='tt-suggestion'&gt;
     &lt;div&gt;&lt;span class="my-directive"&gt;bla&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I guess it's because Angular is not informed about the elements that are added by jQuery and hence it doesn't invoke the directive. How do I notify Angular of these changes?</p>