How to call angular js function controller from jquery in page

Question

How to call angularjs function or controller from jquery I am new to this angularjs here is my function here i have to pass the var1 and var2 from jquery i have searched many articles but i cant understand. Please help me

<script type="text/javascript">

    function customersController($scope, $http) {
        $http.get("https://tic.com/testingservice/HttpService.svc/operator/var1/var2")
        .success(function (response) { $scope.names = response; });
    }

Answer 1

If I speak general , there can be cases when jQuery use is need in Angularjs app ie jQuery plugin is used that isn't available in Angular version.

Every Controller has $scope/this and You can access the scope of an angular element if you have an ID tag attached to the same DOM element as the ng-controller:

the DOM:

<div id="myctrl" ng-controller="MyCtrl"></div>

your controller:

function MyCtrl($scope) {
   $scope.anyFunc = function(var1, var2) {
      // var1, var2 passed from jquery call will be available here
      //do some stuff here
   }
}

in jQuery you do this and it will access that controller and call that function :

angular.element('#myctrl').scope().anyFunc('value1','value2');

Running Sample

 angular.module('app', []) .controller('MyCtrl', function ($scope) { $scope.anyFunc = function (var1, var2) { alert("I am var1 = " + var1); alert("I am var2 = " + var2); }; }); $(function(){ $("#hit").on("click",function(){ angular.element($("#myctrl")).scope().anyFunc('VAR1 VALUE', 'VAR2 VALUE'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div id="myctrl" ng-app='app' ng-controller="MyCtrl"> Call via jQuery <button id="hit">Call</button> </div> 

Happy Helping!

Answer 2

Both the above answers helped me a lot finally i got the answers

$(function(){

   $("#hit").on("click",function(){

      angular.element($("#myctrl")).scope().anyFunc('VAR1 VALUE', 'VAR2 VALUE');

  });

});

function customersController($scope, $http) {
    $scope.anyFunc = function (var1, var2) {
    alert("I am var1 = " + var1);
    alert("I am var2 = " + var2);
$http.get("https://tic.com/testingservice/HttpService.svc/operator/var1/var2")
    .success(function (response) { $scope.names = response; });
};
   }



 <div id="myctrl" ng-app='' ng-controller="MyCtrl">
 Call via jQuery
 <button id="hit">Call</button>
  </div>

Answer 3

Try Like this

 angular.module('app', []) .controller('jqueryCtrl', function ($scope) { $scope.callFromJquery = function (data) { alert(data); }; }); $(function () { $("#press").on("click", function () { angular.element($("#jquery")).scope().callFromJquery('I Called You ! Angular !'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div id="jquery" ng-app='app' ng-controller="jqueryCtrl"> Just Press ME <button id="press">Press ME</button> </div>