Ionic: $scope change not reflected on the page - angularjs

Question

On my Ionic App, I have a view that has a button. When you click on the button, a list of player would be served in a modal, when clicked on a player name, the name of the selected player should be shown on the page and the button should be hidden.
Here's the codepen for the same - http://codepen.io/mradul/pen/vNywqG
However, when I select a value(player name) on the modal, the scope variable gets updated(as it's printed on the console), but the change is not reflected on the page.
HTML -
<ion-header-bar class="bar-positive bar-header">
<h1 class="title">Selected Player</h1>
</ion-header-bar>
<ion-content>
<script id="select-player.html" type="text/ng-template">
<div class="modal">
<ion-header-bar>
<h1 class="title">Choose Player</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="player in getPlayerList().players" ng-click="closeModal(player)">
{{player}}
</ion-item>
</ion-list>
</ion-content>
</div>
</script>
<br/><br/>
<div id="player">
{{sc.player}}
<div class="row">
<a class="button" ng-click="openModal()" ng-show="sc.player.playerName == null">Set player</a>
<div ng-hide="sc.player.playerName == null">
<div class="col col-33 " > {{sc.player.playerName}}</div>
</div>
</ion-content>
JS -
angular.module('ionicApp',['ionic']).controller('scoringController', function ($scope, $ionicModal) {
$scope.player = {playerName:""};
$scope.getPlayerList = function () {
console.log("getting player list");
return {
"players": [
"Mradul",
"JAin",
"Phunsuk Wangdu",
"Hulk"
]
};
};
$ionicModal.fromTemplateUrl('select-player.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal
})
$scope.openModal = function () {
console.log("Setting model open ");
$scope.modal.show()
}
$scope.closeModal = function (playerName) {
$scope.player.playerName = playerName;
//$scope.activePlayers[0] = playerName;
console.log("Player Set ", $scope);
console.log("model closed");
$scope.modal.hide();
};
$scope.$on('$destroy', function () {
$scope.modal.remove();
});
});
Player was initially a primitive(string), but I changed it into an object by having a property - playerName. May be I didn't do it right. Please suggest how can I have the parent scope variable updated correctly. I might have missed something very basic.

Answer 1

Write $scope.$apply() after your change

Answer 2

Try this, Am not sure about it
{{player.playerName}}