如何修改服务（工厂）中事件的范围？

Question

我创建了一个工厂，用于创建播放不同音频文件的音频标签。

我想要做的是在加载新音频文件时显示加载gif，然后在加载时消失。

我的gif有一个简单的html标签：

<img src="loading.gif" ng-show="displaySoundFileLoader"/>

根据我的控制器中调用的内容，我的var displaySoundFileLoader为true或false。 （在加载时为false，在调用audio.loadfile（id）之前为true）

我的工厂是：

  factory('audio',function ($document) {
    var audioElement = $document[0].createElement('audio'); //we add to the dom, it is independent to the scope like that
    return {
      audioElement: audioElement,
      audioSrc: null,//See hack for Chrome below

      loadfile: function(id) {
          this.audioSrc = 'http://mysupersoundlibrary.com/sound.php?id='+id;
          this.play();//and we play it
      },
      play: function() {
          audioElement.src = this.audioSrc;//Small hack because bug in Chrome... See for more info: https://mkswap.net/m/blog/How+to+use+HTML+5+%26lt%3Baudio%26gt%3B+with+JavaScript
          audioElement.play();
      }

    };
  });

像这样我可以加载＆amp;用按钮播放声音，然后根据需要重新播放（我不想显示播放器）

问题在于，当我尝试这样做时：

audio.audioElement.oncanplaythrough = function () {
    $scope.displaySoundFileLoader = false;
    alert('test');
};

我尝试使用参数中的范围，我尝试了很多东西，它没有工作（警报测试工作）。如何在出厂对象的情况下修改范围？