You can call your angularJS function from javascript or jquery with the help of angular.element(). In this article I will explain this with a simple short example.

Introduction

Many time it may happens that you need to call a method created in angularJS in javascrip/jquery function block. One scenario can be that you are using angularJS in your MVC application and you are making an ajax call and OnSuccess() event you need to call an angularJS method into your javascript code block. Don't go on my words. It is not so tough as I am trying to make it. You can do this using one line of code calling angularJS scope into your javascript block. Let's see how can we do this with a short example.

Angular JS Controller

Below is the simple angularJS controller where I have created a simple function which will open an alert box.

var app;

(function () {
    app = angular.module("TestApp", []);
})();

app.controller('TestController', ["$scope", function ($scope) {
    $scope.TestAngularMethod = function () {
        alert('Hello you are calling angular js method.');
    }
}]);

HTML

Copy below html code.

        <div class="margin-bottom width100floatleft" ng-app="TestApp" ng-controller="TestController" id="divID">
            This is test div. Click the button to call javascript function 
        <span style="border:1px solid black; border-radius:5px; padding:10px;" onclick="OnSuccessData()">Click Me</span>
        </div>

Javascript

Copy below javascript code.

    <script type="text/javascript">
        function OnSuccessData() {
            angular.element(document.getElementById('divID')).scope().TestAngularMethod();
        }
    </script>

If you noticed in javascript code, I am using angularJS scope of TestController and calling TestAngularMethod() from here. This line will allow you to use your angularJS controller scope into javascript also. This was the simple trick I used to call angularJS function into my javascript function. Hope it can help you.