AngularJS : View doesn't update when a value in $scope changes

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

Where did you try putting $scope.$apply()? Is games coming back from the server the way you expect it? Have you confirmed via network? — Antiga
– Antiga, Commented Jan 5, 2015 at 7:54
After the entire wrapped http request, and i tried putting it at the end in the http request. — iTakeHome
– iTakeHome, Commented Jan 5, 2015 at 7:55

Mehmet Otkun · Accepted Answer · 2015-01-05 08:34:19Z

3

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){
  //....
 }]

edited Jan 5, 2015 at 8:34

answered Jan 5, 2015 at 7:55

Mehmet Otkun

1,3949 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

iTakeHome Over a year ago

Should've mentioned, i tried the timeout already ( JS' setTimeout )

iTakeHome Over a year ago

The first one doesn't work but thanks for your answer

Mehmet Otkun Over a year ago

JS setTimeout not effect, use angular timeout.

Mehmet Otkun Over a year ago

For first one, did you correct the scope tag to $scope ?

iTakeHome Over a year ago

Yes i did. Can you tell me where in this code do i inject the $timeout, i'm getting $timeout is not defined.

|

Collectives™ on Stack Overflow

AngularJS : View doesn't update when a value in $scope changes

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related