Angular Directive: Access images generated with ng-repeat from parent directive once all have loaded

imageDirective.html

<div>
	<div ng-repeat="image in images" style="display: inline;">
		<img image-directive-item ng-src="{{image.url}}" data-index="{{$index}}" />
	</div>
</div>

imageDirective.js

	angular.module("myApp")
	.directive("imageDirective", function() {
		return {
			scope: { images: '=images'},
			controller: function($scope){
				
				var toBeLoaded = $scope.images.length;
				
				this.childLoaded = function(index, childElement) {
					$scope.images[index].elem = childElement;
		
					if(--toBeLoaded == 0) {
						allChildrenLoaded();
					}
				};
				
				function allChildrenLoaded() {
					console.log("All children loaded.");
					console.log($scope.images[0].elem);
				}
				
			},
			templateUrl: _contextPath + 'imageDirective.html'
		};
	})
	.directive("imageDirectiveItem", function() {
		return {
			require: "^imageDirective",
			link: function(scope, element, attrs, imageDirectiveCtrl) {
				element.bind("load", function() {
					var elem = this;
					var index = parseInt(this.attributes["data-index"].value);
					scope.$apply(function() {
						imageDirectiveCtrl.childLoaded(index, elem);
					});
				});
			}
		};
	});