title: Angular - Can't access controller methods after compiling directive
body: <p>I am heavily modifying a WYSIWYG js plugin, and am inserting my own custom elements into it.
  To insert the custom elements, I am using directives so that they can be easily maintained if I need to make a change. Here is an example of my code so far:</p>
  
  <p>The initial load of the wysiwyg editor:</p>
  
  <pre><code>&lt;div ng-controller="wyswiygCtrl"&gt;
      &lt;textarea wysiwyg-editor ng-model="content"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is an example of a custom element (directive) I am inserting into the wysiwyg content:</p>
  
  <pre><code>&lt;wysiwyg-element class="custom_element" name="awesome" type="checkbox" checked="true"&gt;&lt;/wysiwyg-element&gt;
  </code></pre>
  
  <p>I am using the following code within the directive's initialisation, to compile any custom elements (directives) within it:</p>
  
  <pre><code>var e = angular.element(wysiwygEditor.get(0).innerHTML);
  $compile(e.contents())(scope);
  wysiwygEditor.html(e);
  </code></pre>
  
  <p>It compiles the directives just as I need it to, but here comes the tricky part. I need to be able to call a function within the 'wysiwygCtrl' from OUTSIDE angular. I am able to do this before compiling, but for some reason, after using angular's compile function, I can't access the scope on the elements.</p>
  
  <p>Here is the code which works before a <code>$compile</code>:</p>
  
  <pre><code>angular.element($('.custom_element')).scope().wysiwygModal();
  angular.element($('.custom_element')).scope().$apply();
  </code></pre>
  
  <p>I get the following error after trying to call the <code>wysiwygModal</code> function after a $compile:</p>
  
  <pre><code>Uncaught TypeError: Object #&lt;Object&gt; has no method 'wysiwygModal'
  </code></pre>
  
  <p>What am I doing wrong?</p>