Angular JS: Calling angular function from jQuery

Hi Friends,

Angular JS and jQuery are best companion and in most of the cases we need to use both of those to achieve some functionality.

I my case as well I was using jQuery UI tabs with Angular JS. Where tabs are manually added but in my case I wanted to call an angular function when tabs are getting changed.

The problem is tabs changed event was non-angular section and $scope was not available in the jQuery tab change event.

Solution:

We need to provide the ID property for controller div where we have defined ng-controller.

<div class="form-group" ng-controller="getTestCtrl" id="ctrlTest">

Then we can call the method from non-angular part of the JavaScript as well, in my case jQuery UI tabs change event.

angular.element('#ctrlTest').scope().GetTestData();

angular.element('#ctrlTest').scope().$apply();

Make sure to call $apply() method which triggers a $digest cycle after calling the function as we are not in Angular cope hence we need  to explicitly call $apply method to force the UI binding.