Home AngularJs How to call AngularJS controller function in Jquery?

How to call AngularJS controller function in Jquery?

by Shahriar Sagor

Here now today, i will show you a new topics about how to call angular function in our js file. Sometimes we required to call the angular controller function in our jquery code because sometimes we can make the single function in all project.

Now it is very simple post but i hope it is more important because many times we need to call angularjs function from the jquery.

So, here i am giving the example for will help you how to call the angularjs function in jquery. It is from the scratch on that way we can simply understand.

Now in this example i will create one function as “$scope.makeAlert()” In my AngularJS controller. So this function need one argument on that way we can also pass the argument. When we click on button here i use id of controller element and also use with the angular element, then it is simple use scope helper and at the last function name with the argument as like as bellow example.

<!DOCTYPE html>
    <title>How to call AngularJS controller function in Jquery</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <div ng-app="mainApp" ng-controller="myController" id="mainController">
            <button>Click Here</button>
        <script type="text/javascript">
            var mainApp = angular.module("mainApp", []);
            mainApp.controller('myController', function($scope, $timeout) {
                $scope.makeAlert = function(arg) {
        <script type="text/javascript">
                angular.element(document.getElementById('mainController')).scope().makeAlert('This is for Test');

Read Also: How to implement infinite ajax scroll pagination in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook


You may also like