Call Angular Function with Jquery

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="mycontroller" ng-controller="mycontroller"></div>

your controller:

function mycontroller($scope) {
   $scope.myfunction = function() {
      //do some stuff here
   }
}

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

angular.element('#mycontroller').scope().myfunction();

Do remember to call

angular.element('#mycontroller').scope().$apply() 

if you update a function variable within scope in myfunction, it will not work otherwise (thanks @andersh)

Leave a Comment