Calling Angularjs Function from a different javascript/Jquery Function

Question

I have two js files, app.js and datepicker.js. I have nothing to do with the html file here. There is a javascript function called clickApply() in datepicker.js. I want to call another submitDetails() function which is inside the app.js file from the clickApply() function. How to do it?

 angular.module('ctrl').controller('MyCtrl', ["$scope","$rootScope", function($scope, $rootScope){ $rootScope.submitDetails=function() }]);//inside app.js 

 clickApply: function(e) { //inside datepicker.js angular.element('#span').on("click",submitDetails()); this.hide(); this.element.trigger('apply.daterangepicker', this); } 

Answer 1

No one prefer executing the angular functions outside of angular scope. If you want to implement a jQuery or any other external plugin in AngularJS, wrap it in directive and use it.

Below code is used for debugging purpose only.

Change your clickApply function signature to below:

• For accessing scope you can use angular.element(element).scope()
• For rootScope you can use angular.element('body').scope().$root`

 clickApply: function(e) { //inside datepicker.js angular.element('#span').on("click", function(e) { // if you want to access rootScope var rootScope = angular.element('body').scope().$root; rootScope.submitDetails(); // if you want to access current scope // var scope = angular.element(e.target).scope(); // scope.submitDetails(); }); this.hide(); this.element.trigger('apply.daterangepicker', this); }