HTML 页面中的角度属性可见性

我有一个简单的角度页面：

<div ng-controller="JoinGameController">
    <table>
        <tr ng-repeat="game in gameList">
            <td>{{game}}</td>
            <td>&nbsp;</td>
            <td><a href="#!/joinGame" ng-click="selectGame(game)">select</a></td>
        </tr>
    </table>
    <br/>
    Selected game: &nbsp; {{selectedGameId}}
    <br/>
    <a href="#!/joinGame" ng-click="clearSelection()">Clear</a>
    <div ng-if="isGameSelected"> &nbsp; 
        <p>To join this game put your name in the box and click the button</p>
        <input type="text" ng-model="playerName">
        <button ng-click="joinExistingGame()">Join Game</button>
        <br/>
        <p ng-if="playerAdded">{{addPlayerResponse}}</p>
    </div>
</div>

我的问题是播放器输入框：ng-model="playerName">单击按钮时不提供值（绑定不起作用）。但是，当我将其移动到它所属的 DIV 元素上方时，它将起作用。

这是该页面的控制器：

'use strict';
angular.module('pokerApp.joinGame', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/joinGame', {
         templateUrl: 'joinGame/joinGame.html',
         controller: 'JoinGameController'
    });
}])
.controller('JoinGameController', ['$http', '$scope', function ($http, $scope) {
    $http.get('http://localhost:8080/PokerGame-REST/allGames').success(function (response) {                    
        $scope.gameList = response;
    });
    $scope.selectedGameId = null;
    $scope.isGameSelected = false;
    $scope.playerName = '';
    $scope.playerAdded = false;
    function selectGame(game) {
        $scope.selectedGameId = game;
        $scope.isGameSelected = true;
    }
    function clearSelection() {
        $scope.selectedGameId = null;
        $scope.isGameSelected = false;
    }
    function joinExistingGame() {
         $http.get('http://localhost:8080/PokerGame-REST/addHand', {
                    params: {
                        gameId: $scope.selectedGameId,
                        name: $scope.playerName
                    }
         }).success(function (response) {
              $scope.playerAdded = true;
              $scope.addPlayerResponse = response.addHand;
         });
    }
    $scope.selectGame = selectGame;
    $scope.clearSelection = clearSelection;
    $scope.joinExistingGame = joinExistingGame;
}]);

这里有什么收获？