Why does my view not update when changing scope variable?

Question

Navbar (main.html):

<nav class="navbar navbar-dark bg-primary">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx2">
        <i class="fa fa-bars"></i>
    </button>

    <div class="container" ng-controller="UpComingGamesCtrl">
        <div class="collapse navbar-toggleable-xs" id="collapseEx2">
            <a class="navbar-brand" href="#/">VideoGame Releases</a>
            <form ng-submit="searchGame()">
                <input type="text" id="form1" class="form-control" ng-model="gameToSearch">
            </form>
        </div>
    </div>
</nav>

Controller:

...
$scope.games = [];
$scope.searchGame = function () {

    if ($scope.gameToSearch) {
        console.log('entered with text');
        getUpcomingGames.getGame($scope.gameToSearch).get({}, function (data) {
            $scope.games = data.results;
        });
    }
}

upcoming_games_template.html:

<div class="row" ng-repeat="games in games | chunkBy:3">
    <div class="col-md-4" ng-repeat="game in games">
        <div class="card">
            <div class="view overlay hm-white-slight card-image">
                <img src="{{game.image.screen_url}}" class="img-fluid" alt="">
                <a href="#/">
                    <div class="mask waves-effect waves-light"></div>
                </a>
            </div>

            <div class="card-block">
                <h4 class="card-title">{{game.name}}</h4>
                <p class="card-text">{{(game.original_release_date | limitTo: 10) || getFutureReleaseDate(game) }}</p>
                <a href="#/" class="center-block btn btn-info waves-effect waves-light">Read more</a>
            </div>
        </div>
    </div>
</div>

I am trying to create a search function on my navbar in my main.html file and when the user presses the enter key, I get the info from an external API using that search and update the upcoming_games template. Now, I know I enter the function "searchGame" because it logs to console and I know the data I get back is good. But when i try to change the variable "$scope.games = data.results;", the view does not update. Now if I create the same search bar form inside the upcoming_games_template.html it works perfectly.

Why does this happen ? I'm declaring the controller in my main.html file, so it should work the same, right ?

I also don't think I need the $scope.$apply() in this situation.

Thank you.

Can you create a jsfiddle for this code so we can test it there. — Indranil Mondal
– Indranil Mondal, Commented Sep 7, 2016 at 21:39
I would but I have no idea how to create an angular app there or anything like that.. never worked with it before. — Miguel Oliveira
– Miguel Oliveira, Commented Sep 7, 2016 at 21:42

Andre.Anzi · Accepted Answer · 2016-09-07 23:00:01Z

1

Probably you're using two different controllers, so you're filling the $scope.games variable of a controller while you would fill the $scope.games variable of the other controller. If you provide a jsfiddle it could be simpler. If you want a fast solution you should try to use a $rootScope.games variable and repeat over the same rootscope variable :

<div class="row" ng-repeat="games in $root.games | chunkBy:3">
    <!-- Content -->
</div>

This is not the better solution but it should works.

answered Sep 7, 2016 at 23:00

Andre.Anzi

1516 bronze badges

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

1 Comment

JorgeMadson Over a year ago

Thanks you made my day! I have 3 controllers in my view. I was trying to understand what is going for for like 2 days.

Collectives™ on Stack Overflow

Why does my view not update when changing scope variable?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related