Caching images and then rendering cached images in angularjs -

i have .json file in format:

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

now when obtain file have put images cache ($angularcachefatory) , once done render view. this:

servicename.getjsonfile().then(function(data){     var x = data;      $scope.myimages = data;      // download x.graph , insert cache     x.foreach(function(item, index, array){          $http.get(item.graph).then(function(res){              imagecache.put('x.graph', res);          });     })  }); 

now after have cached it, how obtain cached image in view?

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

this not work. doing wrong?

edit:

overall objective:

first fetch images listed in url. store images in cache. render image in cache.

when render view, don't want fetch image on network. want display image in cache. hence before rendering view pre-loading images , inserting cache ng-src={{path}} fetches locally cached images.