Angularjs 如何捕捉录像带播放按钮事件并手动加载源

我有一台录像带播放机。 我需要捕捉用户单击vg播放暂停按钮或vg覆盖播放并向服务器发送请求以打开流，然后服务器返回主机名和流启动的端口

Example: http://localhost:8999

由于端口可以更改，我需要在按下播放按钮时手动将源代码传递给videogular

我试过的代码

视图：

使用这段代码不会发生任何事情，但如果我使用已经定义的源代码初始化player，则player可以工作。 如何在按下播放按钮时手动添加源

更新：

由于对http资源的异步请求，切换源是否会出现问题

<div class="videogular-container">
    <videogular vg-theme="config.theme">
        <vg-media vg-src="config.sources" vg-tracks="config.tracks"></vg-media>
        <vg-controls>
            <vg-play-pause-button ng-click="requestSource()"></vg-play-pause-button>
            <vg-time-display>{{ currentTime | millSecondsToTimeString }}</vg-time-display>
            <vg-scrub-bar>
                <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
            </vg-scrub-bar>
            <vg-time-display>{{ totalTime | millSecondsToTimeString }}</vg-time-display>
            <vg-volume>
                <vg-mute-button></vg-mute-button>
                <vg-volume-bar></vg-volume-bar>
            </vg-volume>
            <vg-fullscreen-button></vg-fullscreen-button>
        </vg-controls>
        <vg-overlay-play ng-click="requestSource()"></vg-overlay-play>
        <vg-poster vg-url='config.plugins.poster'></vg-poster>
    </videogular>
</div>

angular.module('myApp')
    .controller('MoviesShowController', function ($scope, $routeParams, $sce, MovieService, StreamService) {

        $scope.config = {
            sources: [],
            theme: 'bower_components/videogular-themes-default/videogular.css'
        };
        $scope.requestSource = function() {
            StreamService.getResource().get({ file: encodeURI($scope.movie[0].url)  }, function (stream) { 
                console.log(stream.url);
                $scope.config.sources = [
                    {src: $sce.trustAsResourceUrl(stream.url), type: 'video/mp4'},
                ];
            });
        };

    });