var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, images) {
    $scope.state = 'loading';
    
  images.load(['https://hoshi.imgix.net/amyzaroff/uploads/pages/1/mjhlqgqvn/JessieEliWed431.jpg?w=3000&h=3000'])
  .then(function(){
      $scope.state = 'Images loaded';
  });
  
});

app.factory('images', ['$q', function($q) {
    return {
        load: function(urls) {
            if (!(urls instanceof Array))
                return $q.reject('Input is not an array');

            var promises = [];
            
            for (var i = 0; i < urls.length; i++) {
                var deferred = $q.defer();
                var img = new Image();

                img.onload = (function(deferred) {
                    return function(){
                        deferred.resolve();
                    }
                })(deferred);
                
                img.onerror = (function(deferred,url) {
                    return function(){
                        deferred.reject(url);
                    }
                })(deferred,urls[i]);

                promises.push(deferred.promise);
                img.src = urls[i];
            }
            
            return $q.all(promises);
        }
    }
}]);  
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>{{state}}!</p>
  </body>

</html>
/* Put your css in here */