title: how to add Angular $http event listeners
body: <p>I'm currently uploading a file in an angular directive with...</p>
  
  <pre><code>var fd = new FormData();
  fd.append("uploadedFile", scope.uploadedFile);
  
  var xhr = new XMLHttpRequest();
  xhr.upload.addEventListener("progress", uploadProgress, false);
  xhr.addEventListenter("load", uploadComplete, false);
  xhr.addEventListenter("error", uploadFailed, false);
  xhr.addEventListenter("abort", uploadCanceled, false);
  xhr.open("POST", scope.postUrl);
  scope.uploadInProgress = true;
  xhr.send(fd);
  
  function uploadProgress(e){
    scope.$apply(function(){
      if(e.lengthComputable){
        scope.progress = Math.round(e.loaded * 100 / e.total);
      } else {
        scope.progress = 'unable to compute';
      }
    });
   }
  
   ...
  </code></pre>
  
  <p>Can this snippet be refactored using $http provider?  i can't figure out how to keep my event listeners.</p>