AngularJS：当$ scope中的值更改时，View不会更新

Question

I have an html file with a view that gets it's values from an AngularJS scope.

<form ng-controller="EmployeesController as emp" class="signed-in" ng-submit="logOutUser()">
    <div class="row">
        <div class="col-md-10 text-left">
            <h5>Your Games, {{emp.username}}</h5>
        </div>  
        <div class="col-md-2">
            <button class="btn btn-md btn-primary btn-block" type="submit">Log Out</button>
        </div> 
    </div>
    <div class="row store">
        <div class="col-md-12">
            <div class="panel panel-default">
              <div class="panel-heading">Games To Buy</div>
              <div class="panel-body">
                    <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Game Name</th>
                            <th>Game Status {{what}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="game in emp.games">
                            <td>{{game}}</td>
                            <td>
                                <button ng-click="buyGame(game.gameId)" type="button" class="btn btn-sm btn-primary btn-block" href="#">Buy</button>
                            </td>
                        </tr>
                    </tbody>
                </table> 
              </div>
            </div>
        </div>
    </div>
 </form>

.

And the js file :

var app = angular.module("MyApp", ['ngRoute']);
app.controller("EmployeesController", function($scope, $http) {

this.games = [{gameName: 'aaa', gameId: '1'},{gameName: 'aaa', gameId: '1'},{gameName: 'aaa', gameId: '1'}];
this.ownedGames = [];

var that = this;

$scope.sellGame = function(gameId) {
    var index = that.ownedGames.indexOf(gameId);
    that.ownedGames.splice(index, 1);
    $.jStorage.set(that.username, that.ownedGames);
}

$scope.$on('$viewContentLoaded', function() {
    if($.jStorage.get('Employee') == null)
        $scope.logged = false;
    else
        $scope.logged = true;

    $http.get('employees.json').
    success(function(data, status, headers, config) {
            that.games = data.games;
            that.username = $.jStorage.get('Employee');
            if($.jStorage.get(that.username) != null)
                that.ownedGames = $.jStorage.get(that.username);
    });
});

});

Ok. So basically what the problem is, is that the emp.games variable is empty. First of all it gets commented in the rendered HTML page, and second when i debug the page the variable emp.games is empty. Yet the variable that emp.games is supposed to get its values from, the $scope.games is filled with values as it should be. So the problem is that my emp.games doesn't see that $scope.games was updated in that http request, so IT doesn't update. I googled as much as i could and found out that i should use $scope.apply, but wherever i used it i got the error $digest already in progress... any ideas?

Thanks

Answer 1

Try check diggest

if (!$scope.$$phase) {
     $scope.$apply(function () {
           that.games = data.games;
       })
     }
else
   that.games = data.games;

Or you can inject $timeout service and use it like this, it will be better.

$timeout (function () {
           that.games = data.games;
 }, 0)

Your controller definition is not valid, please use like this.

 app.controller("EmployeesController", ['$scope','$http','$timeout', function($scope, $http, $timeout){
  //....
 }]