javascript - AngularJS call function from controller in Drag & Drop directive -

i have directive natively drag & drop angularjs , working fine:

 mydesigner.directive('draggable', function() {  return function(scope, element) {  // gives native js object  var el = element[0];   el.draggable = true;   el.addeventlistener(    'dragstart',    function(e) {      e.datatransfer.effectallowed = 'move';      e.datatransfer.setdata('text', this.id);      this.classlist.add('drag');      return false;    },    false  );   el.addeventlistener(    'dragend',    function(e) {      this.classlist.remove('drag');      var uielement = $(e.target);      console.log(uielement);       if(uielement.attr('id') === 'design-navbar') {        $(e.target).removeclass('k-item k-state-default k-first');        $(e.target).children().removeclass('k-link k-state-hover');        $(e.target).css('border', '1px solid black');      }      return false;    },    false  );   el.addeventlistener(    'click',    function(e) {      alert('clicked!');      return false;    },    false   );  } });  mydesigner.directive('droppable', function() { return {   scope: {     drop: '&' // parent   },   link: function(scope, element) {     // again need native object     var el = element[0];      el.addeventlistener(       'dragover',       function(e) {         e.datatransfer.dropeffect = 'move';         // allows drop         if (e.preventdefault) e.preventdefault();         this.classlist.add('over');         return false;       },       false     );      el.addeventlistener(       'dragenter',       function(e) {         this.classlist.add('over');         return false;       },       false     );      el.addeventlistener(       'dragleave',        function(e) {         this.classlist.remove('over');         return false;       },       false     );      el.addeventlistener(       'drop',       function(e) {         // stops browsers redirecting.         if (e.stoppropagation) e.stoppropagation();          this.classlist.remove('over');          var item =      document.getelementbyid(e.datatransfer.getdata('text'));         this.appendchild(item);          // call drop passed drop function         scope.$apply('drop()');          return false;       },       false     );   }  } }); 

what want achieve now, it's every-time user drop element, need call function witch outside of directive, inside controllers.js within separate controller. know should occur somewhere in 'dragend' event listener have no clue how it. if can guide me through this.

you want link specific controller running directive, link target directive in html

in html

<div droppable drop-result="dropped(arg1)"></div> 

in directive scope

scope: {     dropresult: '&' // parent } 

in directive link (ondragend)

link: function(scope, element, attrs) {    ...    scope.dropresult({arg1: somevalue}); }