Angular Image Loaded Event

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

app.controller('MainCtrl', function($scope) {
  $scope.images = [{url: 'http://www.w3schools.com/css/img_mountains.jpg'},{url: 'http://www.w3schools.com/howto/img_fjords_wide.jpg'}];
});

function contentLoaded(e){
  console.log(e);
  alert(e.path[0].src+ ' is loaded')
}

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script src="imageLoaded.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div ng-repeat="image in images">
      <img ng-src="{{image.url}}" image-loaded>
    </div>
  </body>

</html>

/* Put your css in here */

//directive for image loaded event
angular.module('imageLoaded',[]).directive('imageLoaded', function () {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.bind("load" , function(e){
	//call the function when image is loaded.
        contentLoaded(e);
      });
    }
  }
});