ng-init in ng-repeat shows only the last item info

Question

I want to loop through items like this:

Answer 1

You are overwriting gameInfo every time. So by the time it renders, it is just showing the last one three times. You need to do it more like:

<div class="game-row" ng-repeat="prediction in predictions" ng-init="getGame(prediction)">

notice we pass in the prediction object, not just the id. And then you can do:

$scope.getGame = function (prediction) {
  prediction.gameInfo = {};
  $http.get('/games/' + game_id)
  .success(function (data) {
    prediction.gameInfo = data;
  });
};

And thin in your html, instead of gameInfo.whatever you will do prediction.gameInfo.whatever, that way each prediction has it's own variable, and you aren't overwriting your single copy of that variable.

For example:

<span class="date">{{gameInfo.play_at | date: 'd.MM HH:mm'}}</span>

would become

<span class="date">{{prediction.gameInfo.play_at | date: 'd.MM HH:mm'}}</span>