Access to XHR object in angular $http service

application.coffee

class AppConfig
  @$inject: []
  constructor: () ->
    # Dirty XHR hack
    XMLHttpRequest::setRequestHeader = ((sup) ->
      (header, value) ->
        if header is '__XHR__' and angular.isFunction(value)
          value @
        else
          sup.apply @, arguments
        return
    )(XMLHttpRequest::setRequestHeader)


class DataFetcher
  @$inject: ['$http', '$q']
  constructor: (@http, @q) ->
    @request =
      method: 'GET'
      url: '/api/v1/endpoint'
      headers:
        __XHR__: ->
          return (xhr) ->
            console.log 'Registering listener...'
            xhr.onprogress = (event) ->
              if (event.lengthComputable)
                percentComplete = (event.loaded / event.total)*100
                console.log percentComplete
  getData: ->
    deferred = @q.defer()
    @http(@request).then (response) -> deferred.resolve(response) 


class AppController
  @$inject: ['$scope', '$dataFetcher']
  constructor: ($scope, $dataFetcher) ->
    $dataFetcher.getData().then (response) ->
      $scope.data = response



angular.module('app.services').service '$dataFetcher', DataFetcher
angular.module('app.controllers').controller 'AppController', AppController

angular.module('app', ['app.services', 'app.controllers']).config(AppConfig)