ondragstart, ondragover,onstart - $scope is not defined

Question

My task is to process the dropped text using angular. I keep getting this error $scope is not defined on drag and drop events. Any idea how to fix this?

I already looked into angular drag and drop libraries. They don't allow drag and drop for simple text. Most of them work with lists. Let me know if there is one that works for this task

Here is the plunker:

[http://plnkr.co/edit/egKL13hsHka6RiX4UfSS?p=preview][1]

here is the controller:

var app = angular.module("test",  []);
app.controller('testCtrl', ['$scope',function  ($scope) {
   $scope.nouns = ['guitar'];
   $scope.verbs = ['play'];
   $scope.allowDrop= function (ev) {
        ev.preventDefault();
   };
   $scope.drag=  function (ev) {
        ev.dataTransfer.setData("Text", ev.target.id);
   };    
   $scope.drop=  function (ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        if(ev.target.id =='verb' && $scope.verbs.indexOf(data) != -1){
            ev.target.appendChild(document.getElementById(data));
        }
        else{
            alert(data + ' is not a ' + ev.target.id +'. Try again');
        }            
    };      
  }]);

Answer 1

$scope object will not available in "Outside angular context". Whenever you want to access angular scope in JavaScript (Outside angular world) then you need to get the scope of by getting the DOM of that element & then access the scope of it like angular.element(document.getElementById('testApp')) which is nothing but scope of the body.

Working Plunkr

Refer this SO answers to get access to the scope outside angular context.