AngularJS scope does not change twice controller

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;
    };
}]);