angular.js - How to force angular DOM to update

Question

Introduction

Currently there is a music player, the specific html is as follows

<audio class="music_audio" ng-src="{{now_music.src}}" ></audio>
<button class="btn btn-default" ng-click="musicPlay()">
    <span class="glyphicon "ng-class="playClass?'glyphicon-pause':'glyphicon-play'"></span>
</button>
button class="btn btn-default" ng-click="musicNext()">
    <span class="glyphicon glyphicon glyphicon-step-forward"></span>
</button>

    musicElem.next=function(){
        this.clearProgressbar()
        this.now_music=this.music_list[this.music_list.indexOf(this.now_music)+1];
        console.log("now list",this.music_list)
        this.play();
        $rootScope.$broadcast("state_play",true)
        $rootScope.$broadcast("now_music",this.now_music)
        console.log("now music",this.now_music)
    }
    
        musicElem.play=function(){
        console.log(this.music_audio.paused)
        if(this.music_audio.paused){
            this.music_audio.play();
            this.progressbar();
            $rootScope.$broadcast("state_play",true)
        }else{
            this.music_audio.pause()
            $rootScope.$broadcast("state_play",false)
            $(this.music_progress).stop(true)
        }
    }

this.music_audio is the audio element
this.now_music takes a piece of data from this.music_list to represent the currently playing music as an object. The format is as follows {src: "http://baidu.com/1.mp3",name:"xxxname"}
playClass is the button state true button The false button is the playback style and the pause style
this.music_progress is the progress bar. This can be ignored for now

General idea

When you click on the next song, the next music will be obtained from the list, and now_music will be updated. The view will update the DOM according to now_music.src, and at the same time set the current music to the paused state. Use The thing is that src changes will be automatically reset.
Now here comes the problem
If there are two identical srcs, such as [{src: "123.mp3"}, {src:123.mp3}], then the view is src will not be updated So when you click on the next song, you still get the current music status.
So I want to ask how to force the DOM to refresh in angularJS even if the src is the same?

Answer 1

Refer to $scope.$apply

Answer 2

If it is not in the ng function, just pass $scope and $apply where the value is modified