Переменная $ scope отказывается изменять значение в обработчике функции wavesurfer

Question

Привет всем, вот пример моего кода ниже, я пытаюсь получить $ scope.icon для обновления до нового значения в обработчике функции waveurfer, и мне кажется, что он просто не работает, независимо от того, что яделать.Кто-нибудь с идеями по этому поводу?

msp.controller('Controller2', function($scope, $http, $rootScope) {
    $scope.message_id = $rootScope.message_id;
    $scope.message_title = $rootScope.message_title;  
    $scope.message_date = $rootScope.message_date;
    $scope.message_audio = $rootScope.message_audio;
    $scope.message_image = $rootScope.message_image;
    $scope.icon = "fa fa-spinner fa-spin";
    var id = $scope.message_audio;
    var wavesurfer = WaveSurfer.create({
        container: '#waveform',
        waveColor: '#fff',
        progressColor: 'red',
        hideScrollbar: true,
        height: 100
    });
    $http({
        method: 'GET',
        url: 'http://customurl/app/messages.php',
        params: {id: id}
    }).then(function success(response) {
        $scope.message_audio = response.data;
        wavesurfer.load($scope.message_audio);
        wavesurfer.on('ready', function() {
            $scope.icon = "ti-control-skip-forward";
        })
    }, function error(response) {
        $scope.message_audio = response.data;
    });
    $scope.fn_play = function() {
        wavesurfer.playPause();
    }
});

Answer 1

Попробуйте явно сообщить AngularJS, что значение было обновлено, поместив его в блок $scope.$apply(), например:

wavesurfer.on('ready', function() {
    $scope.$apply(function() {
        $scope.icon = "ti-control-skip-forward";
    }
})