AngularJS scope does not change twice controller - angularjs

Question

I tried to change value on my DOM. but it doesn't work well.
This is my source
<div class="header_player_info" ng-controller="playerCtrl">
<div>{{ playbackTimeCurrent }} / {{ playbackTimeTotal }}</div>
{{playerInfo.song}}
</div>
<div class="ut_player" ng-controller="playerCtrl">
<div>
<span>{{ playbackTimeCurrent }} / {{ playbackTimeTotal }}</span>
<div> {{playerInfo.song}}</div>
<div>{{playerInfo.artist}}</div>
</div>
</div>
When called $scope.updatePlayerInfo PlayerCtrl's $scope will be change,
but only second DOM ng-controller="playerCtrl" apply $scope data. First ng-controller="playerCtrl" does not bind scope data.
any problem with my logic?
app.controller('playerCtrl', ['$scope', '$http', '$location', 'playList', function ($scope, $http, $location, playList) {
$scope.playerInfo = { // init playerInfo
cover: 0,
song: "Please select song."
}
//Other $scope Function call updatePlayerInfo.
$scope.updatePlayerInfo = function(songData) {
$scope.playerInfo = {
cover: songData.cover,
key: songData.key,
song : songData.song_en,
artist: songData.artist_en
};
$scope.playerPaused = false;
};
}]);