刷新页面后并非所有图像都被加载

Question

我正在使用Java Spring REST和Angular / JS进行fullstack项目，这给我带来了一些严重的问题。我有主页，我显示9个随机产品（游戏）。我进行http调用以获取产品信息和图像路径（保存在服务器上）。获取imagepath后，我进行http调用以获取图像。在后端一切正常 - 无论是获取游戏信息还是获取图像。

然而，在刷新页面后并非所有图像都显示 - 有时它显示9个中的1个，有时5个，有时没有。如果我不刷新页面并再次拨打同一个电话（按一个按钮），所有图像都会正确显示。我很确定我不了解异步调用。我试图弄清楚好几天但没有成功......

页：

<div ng-repeat="x in games track by $index">
                    <div class="col-sm-3 col-md-4" style="padding-bottom: 15px">
                        <div class="thumbnail">
                            <div class="caption">
                                <h3>{{ x.gameName }}</h3>
                                <img height="200" width="330" data-ng-src="{{ x.gameImage }}">
                                <p>Genre: {{ x.genre }}</p>
                                <p>Price: {{ x.price }}$</p>
                                <p>
                                    <a class="btn btn-primary" id="details" href="gameDetails.html" ng-click="goToTheGameDetails()">
                                        <span class="glyphicon-info-sign glyphicon" /></span> Details
                                    </a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div> 

控制器：

GetRandomGames.getRandomGames($http).then( function(randomGames) { 
    angular.forEach( randomGames, function(game) {
        var promise =  GetImageForGame.getImageForGame(game.imagePath, $http, $location );
        promise.then(
            function(image){
                var fileReader  = new FileReader();
                fileReader.addEventListener("load", function () {
                    game.gameImage = fileReader.result;
                }, false);
                fileReader.readAsDataURL(image.data);          
            },
            function(){
                console.log("Error");
            }
        );
    });
    $scope.games = randomGames;
}); 

服务：

this.getImageForGame = function( imagePath, $http, $location ){ 
    var absUrl = $location.absUrl().replace(/OnlineGameStore.*$/, '');
    var completeUrl = absUrl + "OnlineGameStore/getGamePhoto/" + imagePath;
    return $http( {
        method: 'GET',
        url: completeUrl,
        responseType: "blob"
    });
};

编辑：我刚注意到 - 在网站上做某事后（例如从选择列表中选择选项）所有丢失的图像都已正确加载。