AngularJS: служба $broadcast и $watch не запускаются на приемном контроллере

AngularJS noob здесь, на моем пути к Angular Просветлению:)

Здесь ситуация:

Я реализовал сервис "AudioPlayer" внутри моего модуля "приложение" и зарегистрировался так:

 app.service('AudioPlayer', function($rootScope) {

     // ...

     this.next = function () {
         // loads the next track in the playlist
         this.loadTrack(playlist[++playIndex]);     
     };

     this.loadTrack = function(track) {
         // ... loads the track and plays it
         // broadcast 'trackLoaded' event when done
         $rootScope.$broadcast('trackLoaded', track); 
     };
 }

и здесь контроллер приемника (в основном для логики интерфейса/представления)

app.controller('PlayerCtrl', function PlayerCtrl($scope, AudioPlayer) {


    // AudioPlayer broadcasts the event when the track is loaded

    $scope.$on('trackLoaded', function(event, track) {
        // assign the loaded track as the 'current' 
        $scope.current = track;
    });

    $scope.next = function() {
        AudioPlayer.next();
    };
}

в моих представлениях Показываю текущую информацию о треке, например:

<div ng-controller="PlayerCtrl">
    <button ng-click="next()"></button>
    // ...
    <p id="info">{{current.title}} by {{current.author}}</p>
</div>

метод next() определен в PlayerCtrl, и он просто вызывает тот же метод в службе AudioPlayer.

Проблема

Это прекрасно работает при ручном взаимодействии (т.е. когда я нажимаю на кнопку next()) - поток следующий:

• PlayerCtrl перехватывает щелчок и запускает свой собственный метод next()
• который в свою очередь запускает метод AudioPlayer.next()
• который ищет следующую дорожку в списке воспроизведения и вызывает метод loadTrack()
• loadTrack() $транслирует событие trackLoaded (отправляет сам трек)
• PlayerCtrl прослушивает широковещательное событие и назначает трек текущему объекту
• представление обновляется корректно, показывая информацию current.title и current.author

Однако, когда метод next() вызывается из AudioService в фоновом режиме (т.е. когда дорожка завершена), все шаги от 1 до 5 выполняются, но представление не получает уведомления изменения в текущем объекте PlayerCtrl.

Я ясно вижу, что новый объект дорожки назначается в PlayerCtrl, но он как будто представление не получает уведомления об изменении. Я noob, и я не уверен, что это поможет, но я попытался добавить выражение $watch в PlayerCtrl

$scope.$watch('current', function(newVal, oldVal) {
    console.log('Current changed');
})

который печатается только во время "ручных" взаимодействий...

Опять же, как я уже сказал, если я добавлю console.log(текущий) в $on listener так:

$scope.$on('trackLoaded', function(event, track) {
    $scope.current = track;
    console.log($scope.current);
});

это печатает правильно все время.

Что я делаю неправильно?

(ps Я использую AudioJS для аудиоплеера HTML5, но я не думаю, что это тот, кто виноват здесь...)

Ответы

$scope.$apply(function () {
    $scope.current = track;
});

$timeout(function () {
    $scope.current = track;
}, 0);

 this.loadTrack = function(track) {
     // ... loads the track and plays it
     // broadcast 'trackLoaded' event when done
     $timeout(function() { $rootScope.$broadcast('trackLoaded', track); });
 };

$scope.$evalAsync(function (scope) {
    scope.current = track;
});

// apply changes
$scope.current = track;
try {
 if (!$scope.$$phase) {
  $scope.$apply($scope.current);
 }
} catch (err) {
 console.log(err);
}