Caching images and then rendering cached images in angularjs

I have a file .json

in this format:

[
    {
        "graph":"https://foo.com/img1.png" 
    },
    {
        "graph":"https://foo.com/img3.png" 
    },
    {
        "graph":"https://foo.com/img3.png" 
    }
]

      

        
        
        
      

    

Now when I receive this file, I have to put all the images in the cache ( $angularCacheFatory

) and after that I render the view. Something like that:

ServiceName.getJSONFile().then(function(data){
    var x = data;
     $scope.myImages = data;

    // Download x.graph and then insert it into the cache
    x.forEach(function(item, index, array){
         $http.get(item.graph).then(function(res){
             imageCache.put('x.graph', res);
         });
    })

});

      

        
        
        
      

    

Now after I have cached it, how do I get the cached image in the view?

 <img ng-src={{myImages.graph}} >

      

        
        
        
      

    

It just doesn't work. Am I doing something wrong?

Edit:

Common goal:

First select the images given in the url. Then save the images to the cache. Then render the image that is in the cache.

When I create a view, I don't want to receive the image over the network. I want to display an image that is in the cache. So before rendering the view, I preload all the images and then insert them into the cache to ng-src={{path}}

retrieve the locally cached images.