title: Drag and drop with AngularJS, Javascript and HTML doesn't work
body: <p>I researched much, but I didn't get the answer.
  At the moment I'm learning Angular and javascript and so I'm building a todo-app with HTML, Javascript and (of course) Angular. I want to have a drag and drop system... so if you want to delete a task you drag it and drop it into the trash.
  I managed to build a drag and drop system with HTML and Javascript, but I don't get it to combine it with my angular code.
  Take a look on it by yourself:</p>
  
  <p>my HTML-code (and Javascript). You can drag and drop the things,but the functionality (so if you move a task to the trash it will be deleted) doesn't work (because therefor I need Angular). :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html ng-app="todoApp"&gt;
  &lt;head&gt;
      &lt;title&gt;ToDo&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;script&gt;
      function allowDrop(ev) {
          ev.preventDefault();
      }
  
      function drag(ev) {
          ev.dataTransfer.setData("Text", ev.target.id);
      }
  
      function drop(ev) {
          ev.preventDefault();
          var data = ev.dataTransfer.getData("Text");
          ev.target.appendChild(document.getElementById(data));
      }
  
      function trashdrop(ev) {
          ev.preventDefault();
          var data = ev.dataTransfer.getData("Text");
          ev.target.appendChild(document.getElementById(data));
      }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body &gt;
      &lt;div ng-controller="Tasks as tasksCtrl"&gt;
          &lt;div class="background" ng-dblclick="close()" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
  
              ...
  
              &lt;div id ="$index"class="ng-class: task.classe" ng-repeat="task in tasks | orderBy:sortBy:reverse" ng-click="setEditId($index)" draggable="true" ondragstart="drag(event)" &gt;
                  &lt;img ng-src="{{task.group.image}}" width="30px" height="30px" align="right" style="margin-right: 30%"&gt;
                  &lt;div style="padding: 20px"&gt;{{task.title}}&lt;/br&gt;{{task.body}} {{task.dueDate}}&lt;/div&gt;
              &lt;/div&gt;
  
              ...
  
          &lt;img src="bigtrash.png" class="trash" ondrop="trashdrop(event)" ondragover="allowDrop(event)"&gt;
  
      &lt;/div&gt;
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"&gt;&lt;/script&gt;
      &lt;!-- &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.js"&gt;&lt;/script&gt; --&gt;
      &lt;script type="text/javascript" src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and here is my javascript:</p>
  
  <pre><code>var todoApp = angular.module('todoApp', [])
  
  todoApp.factory('TasksService', function () {
      var steps = [];
      var tasks = [];
      var groups = [];
  
      return {
          getTasks: function () {
              return tasks;
          },
          deleteTask: function (id) {
              tasks.splice(id-1, 1);
          },
          getGroups: function () {
              return groups;
          },
          getSteps: function () {
              return steps;
          },
          getStepsId: function (id) {
              return steps[id];
          },
          getGroupId: function (name) {
              for (var i = 0; i &lt; groups.length; i++) {
                  if(groups[i].name===name) {
                      return i;
                  }
              };
              return undefined;
          },
          addTask:function (task) {
              tasks.push(task);
          },
          addStep:function (step, id) {
              steps[id].push(step);
              tasks[id].steps=steps[id];
          },
          addStepGroup:function () {
              steps.push([]);
          },
          setTasks:function (filterdTasks) {
              tasks = filterdTasks;
              console.log("tasks", tasks);
          },
          addGroup: function (group) {
              groups.push(group);
          }
      }
  });
  
  todoApp.controller('Tasks', function($scope, TasksService) {
  
      var status = "done";
      var priority = "3"
      $scope.groups = TasksService.getGroups();
      $scope.edit = false;
      $scope.specedit = false;
      $scope.id = null;
      $scope.newgroup = false;
      $scope.tasks = TasksService.getTasks();
  
      //the drag and drop functions
      $scope.allowDrop = function(ev) {
          ev.preventDefault();
      }
  
      $scope.drag = function(ev) {
          console.log(ev.target);
          ev.dataTransfer.setData("Text", ev.target.id);
      }
  
      $scope.drop = function(ev) {
          ev.preventDefault();
          var data = ev.dataTransfer.getData("Text");
          ev.target.appendChild(document.getElementById(data));
      }
  
      $scope.trashdrop = function(ev) {
          ev.preventDefault();
          TasksService.deleteTask(ev.target.id);
          var data = ev.dataTransfer.getData("Text");
          ev.target.appendChild(document.getElementById(data));
      }
  
  
      $scope.setEdit = function() {
          $scope.edit = true;
      }
  
      $scope.setEditId = function(id) {
          $scope.specedit = true;
          $scope.id = id;
      }
  
      $scope.deleteTask = function(id) {
          TasksService.deleteTask(id);
      }
  
      $scope.close = function() {
          console.log("hi");
          $scope.specedit = false;
          $scope.edit = false;
          $scope.id = null;
          $scope.newgroup = false;
      }
  
      $scope.newGroup = function() {
          $scope.newgroup = true;
      }
  
      this.addTask = function(title, body, group, date) {
          $scope.edit = false;
          TasksService.addTask({
              id: $scope.tasks.length,
              title: title,
              body: body,
              dueDate: date,
              status: status,
              group: {name: group, color: TasksService.getGroups()[TasksService.getGroupId(group)].color, image: TasksService.getGroups()[TasksService.getGroupId(group)].image,},
              priority: priority,
              classe: "note"+(($scope.tasks.length%3)+1),
              steps: [],
          });
          TasksService.addStepGroup();
      }
  
      $scope.addGroup = function(title, description, color) {
          $scope.newgroup = false;
          var image = "";
          if(color === "red") {
              image = "pin3.png";
          } else if (color === "yellow") {
              image = "pin.png";
          } else if (color === "green") {
              image = "pin4.png";
          } else if (color === "blue") {
              image = "pin2.png";
          }
          TasksService.addGroup({
              name: title,
              description: description,
              color: color,
              image: image,
          });
      }
  
      this.addStep = function(title, body) {
          TasksService.addStep({
              id: $scope.tasks[$scope.id].steps.length || 0,
              title: title,
              body: body,
              status: "notyet",
          }, $scope.id);
      }
  });
  </code></pre>
  
  <p>why doesn't work the second one? 
  the error is: Uncaught ReferenceError: drag is not defined... why?</p>