title: How to call a function inside an Angular component triggered by jQuery events?
body: <p>I have a third-party component that using jQuery (FineUploader).  When a document gets uploaded, it fires an event in javascript/jquery and I need to, at that point, call a function that is inside my Angular component from the jquery code that is outside my Angular component.</p>
  
  <p>The angular button works as expected but I can't get the jQuery button to call the function successfully.</p>
  
  <p><a href="https://plnkr.co/edit/vX9AZWDdd19Wagz4nn60?p=preview" rel="nofollow noreferrer">Here's my plunker example code</a></p>
  
  <p><strong>HTML Page</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"&gt;&lt;/script&gt;
    &lt;script data-require="jquery@1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="style.css" /&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  
    &lt;script&gt;
      function widgetController() {
        var model = this;
        model.addWidget = function(text) {
          alert(text);
        }
      }
  
      var app = angular.module("app", []);
  
      app.component("widget", {
        templateUrl: "template.html",
        controllerAs: "model",
        controller: [widgetController]
      });
  
    &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div ng-app="app"&gt;
      &lt;widget&gt;&lt;/widget&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Template Page</strong></p>
  
  <pre><code>&lt;center&gt;
  
    &lt;p&gt;The jQuery button below is a representing a third-party component that can't be altered and uses jquery events.&lt;/p&gt;
  
    &lt;button id="addAngular" ng-click='model.addWidget("ANGULAR WORKED!!")'&gt;Add widget using Angular&lt;/button&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;
  
    &lt;button id="addJquery"&gt;Add widget using jQuery&lt;/button&gt;
  
  &lt;/center&gt;
  
  &lt;script&gt;
    $(function() {
      //This is mocking up an event from the third-party component.
      $("#addJquery").on("click", function(){
        model.addWidget("JQUERY WORKED!!");  //I need to be able to call the Angular function from jQuery
      });
    });
  &lt;/script&gt;
  </code></pre>