缓存图像，然后在angularjs中渲染缓存的图像

Question

我有一个.json文件格式：

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

现在，当我获得此文件时，我必须将所有图像放入缓存（$angularCacheFatory），一旦完成，我就会渲染视图。 像这样：

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);
         });
    })

});

现在我缓存后，如何在视图中获取缓存的图像？

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

这根本行不通。我做错了吗？

编辑：

总体目标：

首先获取URL中列出的图像。然后将图像存储在缓存中。然后渲染缓存中的图像。

当我渲染视图时，我不想通过网络获取图像。我想显示缓存中的图像。因此，在渲染视图之前，我预先加载所有图像，然后将其插入缓存中，以便ng-src={{path}}获取本地缓存的图像。