angularjs - ui-router の状態変更後に hls.js ストリームを破棄する

Question

私のアプリでは、ビデオストリームを使用しています。このストリームを API から呼び出し、angularjs アプリでビデオ タグ表示ストリームを使用します。

<video id="video" class="iframePreview" controls="true" autoplay
       type="application/x-mpegURL">
</video>
<button class="button_pv btn btn-default"
        ui-sref="camera({'streamID': monitorsIds[0] })">
   Recorded Events
</button>

そしてctrlで、APIからURLを取得してに渡します<video></video

return $http
    .get(serviceBase + "aaaaaa" + Id)
    .then(function(response) {
      $rootScope.monitorsIds = [];

      angular.forEach(response.data, function(key, value) {
        $rootScope.monitorsIds.push(key.monitor);
      });
    if(Hls.isSupported()) {

        var video = document.getElementById('video');
        var hls = new Hls();
        hls.loadSource(window.monitorsIdsStreamWin[0]);
        hls.attachMedia(video);
    }
    });

すべて正常に動作していますが、ネットワーク コンソールで状態を変更すると、まだストリーム データのロードが表示されます...

これを破壊する方法は？thnx