title: Accessing Angular app's props and controller functions from external non-Angular plugins
body: <p>I have an Angular SPA but in it I'm using some non-angular library (Medium Editor [ME from now on] to be exact). I created a directive for ME so if I add a <code>contenteditable</code> element on my views, ME get's instantiated and works properly. So that's not a problem.</p>
  
  <p>The problem is that I also created a special ME extension that requires to make web requests to my server in order to insert correct markup into ME's editable element. But to make these requests it requires some view-model's data and also communicate it back:</p>
  
  <ul>
  <li>it needs to read and set (when undefined) my view model ID</li>
  <li>it needs to <em>constantly</em> manipulate some other view model value in order for my SPA to know that it's still processing so other processes get postponed</li>
  </ul>
  
  <p>I thought I'd simply include <code>input type="hidden" ng-model="..."</code> on my page and change its value and trigger <em>input</em> event so Angular would update its model. Hidden input of course doesn't work. So I changed it to <code>input type="text" class="hidden"</code> and keep the functionality.</p>
  
  <p>This does work, but it doesn't seem to be the proper way of doing things as it's hackish. And this mainly works for model value exchange (get/set). How about if I would have to call some controller function? Is that even remotely possible?</p>
  
  <p>I don't want to make ME's extension to rely in any way on Angular library as it has to be purely ME extension and should be reused in non-Angular SPAs (maybe some other lib SPA or just pure simple DHTML web app). But I would like to make it usable in SPAs as well as ME can easily be used to manipulate some element's markup that can be set to view model through a directive.</p>
  
  <p><strong>What it the proper way of communicating with Angular app from external libs that aren't native to Angular?</strong></p>
  
  <h2>Additional info</h2>
  
  <p>Basically I want to have 4 functions in my custom extension that should somehow access (and manipulate) my Angular view model:</p>
  
  <ul>
  <li><code>getReferenceId()</code> and <code>setReferenceId(id)</code></li>
  <li><code>incrementPending()</code> and <code>decrementPending()</code></li>
  </ul>
  
  <p>Pending counter could be exposed publicly and accessed by my Angular SPA, so it wouldn't process data while extension is still doing its own stuff. But SPA doesn't have any authority over when to set reference ID so it would correctly be read by the extension...</p>