Problem z obrazkami

Cześć!

Piszę sobie aplikację REST w Springu i chcąc nie chcąc musiałem poduczyć się JS'a do zrobienia projektu. Wybrałem Angulara i szczerze powiedziawszy myślałem że znajomość Javy bardziej się przyda w ogarnięciu JS. Ale do rzeczy:

Na stronie głównej zwracam losowe produkty razem ze zdjęciami. Pierwsze zapytanie zwraca zwykłą tablice JSONów produktów i ścieżkę do obrazka (który nie jest zapisywany w BD a na serwerze ). Na podstawie ścieżki robię kolejne zapytania GET, tym razem o obrazki. Zwracanie obrazka działa dobrze, po stronie Springowej wszystko jest okej.

Problem polega na tym, że po odświeżeniu strony nie wszystkie obrazki się ładują. Jednakże po kolejnych zapytaniach (które można wywołać buttonem wywołującym metodę "getRandomGames " ) wszystko działa tak jak powinno. Zgaduje że to problem dotyczący tego że funkcja "readAsDataURL()" jest asynchroniczna, jednakże nie potrafię tego rozwiązać.

I wiem że duplikacje kodu jest zła, jednakże używając serwisu do wczytywania obrazku miałem inne błędy :/. Na razie chciałbym by to działało w 100% przypadków.

app.controller('randomGames', function($scope, $http, $location, getRandomGamesService ){
    
    getRandomGamesService.getRandomGames($http).then( function(randomGames) { 
        angular.forEach( randomGames, function(game) {
            var absUrl = $location.absUrl().replace(/OnlineGameStore.*$/, '');
            var completeUrl = absUrl + "OnlineGameStore/getGamePhoto/" + game.imagePath;
            var image;
            $http( {
                    method: 'GET',
                    url: completeUrl,
                    responseType: "blob"
                }).then( function( response ) {
                        fileReader  = new FileReader();
                        fileReader.onload = function( event ){
                            image = event.target.result;
                            game.gameImage = image;
                        };
                        fileReader.readAsDataURL(response.data);
                    }, function( error ) {
                        console.log( "Error" );
                });
        });
        $scope.games = randomGames;
    });   
    
    
    $scope.getRandomGames = function(){
        getRandomGamesService.getRandomGames($http).then( function(randomGames) { 
            angular.forEach( randomGames, function(game) {
                var absUrl = $location.absUrl().replace(/OnlineGameStore.*$/, '');
                var completeUrl = absUrl + "OnlineGameStore/getGamePhoto/" + game.imagePath;
                var image;
                $http( {
                        method: 'GET',
                        url: completeUrl,
                        responseType: "blob"
                    }).then( function( response ) {
                            fileReader  = new FileReader();
                            fileReader.onload = function( event ){
                                image = event.target.result;
                                game.gameImage = image;
                            };
                            fileReader.readAsDataURL(response.data);
                        }, function( error ) {
                            console.log( "Error" );
                    });
            });
            $scope.games = randomGames;
        });    
    };
});

Ewentualnie ktoś mógłby mi powiedzieć jak przekształcić tą funkcję by przypisanie wartości $scope.games odbywało się po załadowaniu wszystkich obrazków? Czy w jaki sposób to rozwiązać?