angulaire.bind() pour "drop" écouteur d'événement à ne pas se comporter correctement

Plunker démontrant code

J'ai un <div> élément avec la directive dragAndDrop définir comme un attribut:

<div ng-class="divClass" drag-and-drop>Drop files here</div>

(que d'un côté, et de moins en moins important à noter, ng-classe ne se comporte pas comme prévu, mais c'est un question distincte)
Ce que je voudrais, c'est pour les utilisateurs de glisser et déposer des fichiers à partir de leur bureau à la div. Dès lors, si, je utiliser angular.bind() pour détecter la baisse de l'événement. Bien sûr, une fois qu'ils tombent, j'appelle e.stopPropagation() et e.preventDefault(), mais la page se poursuit avec la redirection de la page, peu importe. Ce que je fais mal qui empêcherait les deux méthodes mentionnées ci-dessus à partir de l'exécution?

dragAndDrop directive:

directive('dragAndDrop', function() {
  return {
    restrict: 'A',
    link: function($scope, elem, attr) {
      elem.bind('dragenter', function(e) {
        e.stopPropagation();
        e.preventDefault();
        //still can't get this one to behave:
        //https://stackoverflow.com/q/15419839/740318
        $scope.divClass = 'on-drag-enter';
      });
      elem.bind('dragleave', function(e) {
        e.stopPropagation();
        e.preventDefault();
        $scope.divClass = '';
      });
      elem.bind('drop', function(e) {
        var droppedFiles = e.dataTransfer.files;
        //It's as though the following two methods never occur
        e.stopPropagation();
        e.preventDefault();

        if (droppedFiles.length > 0) {
          for (var i=0,ii=droppedFiles.length;i<ii;i++) {
            $scope.files.push(droppedFiles[i]);
          }
        }
      });
    }
  };
});

OriginalL'auteur Scott | 2013-03-20