AngularJS Call Controller Function from Javascript
<p>In Angular SPA application, you would normally have the following codes in app.js</p>

<pre><code>var app = angular.module('MyApp', ['ngRoute']);

app.config(function ($routeProvider){
  $routeProvider.when("/home", {
        controller: "homeCtrl",
        templateUrl: "app/views/home.html"
    });
});
</code></pre>

<p>the HTML (home.html)</p>

<pre><code>&lt;form role="form" id="formHome"&gt;
  &lt;div&gt;
    HTML Elements Here...
  &lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>And the homeCtrl:</p>

<pre><code>'use strict';
app.controller('homeCtrl', ['$scope', '$location', function($scope, $location){

  $scope.angularFn = function(obj){
    // Do Some Stuff with obj.
  }

  function myTestFunction(){
    // Call $scope.angularFn here.
    var obj = {name: 'John', team: 'Nissan'};
   $scope.angularFn(obj);
  }

}]);
</code></pre>

<p>The above code obviously would error out as the $scope.angularFn goes undefined.</p>

<p>I've read <a href="https://stackoverflow.com/questions/16709373/angularjs-how-to-call-controller-function-from-outside-of-controller-component">somewhere</a> that you need to get the element ID for which the controller is being used, and call the angular function from that. i.e.:</p>

<pre><code>angular.element(document.getElementById('formHome')).scope().angularFn(obj);
</code></pre>

<p>But checking the <code>console.log(angular.element(document.getElementById('formHome')).scope)</code></p>

<p>seems to point to the angular.js library, instead of the controller, hence, calling the angularFn function is also undefined.</p>

<p>So, how would you be able to call the controller function from within the plain old JS function?</p>