I'm building a slider with AngularJs using a directive but now I have a problem. This is the code of my home.html
<div class="loading" ng-hide="$root.showSlider">
   <div class="logo">
       <img class="" ng-src="./img/logo.png">
   </div>
</div>
<slider-directive images="images" ng-show="$root.showSlider" ng-if="images"/>
Now I show the snippet the controller:
.controller("HomeController",["$scope","$rootScope", function($scope, $rootScope) {
            (function getData() {
                    //do async call that return data
                    $scope.images = data;
                }, function(err) {
                    console.log(err);
                });
            })();
        }
    ]);
And Now I can show the code of my directive:
.directive('sliderDirective', function($rootScope, $interval) {
            return {
                restrict: 'E',
                templateUrl: 'html/.../slider.html',
                replace: true,
                scope: {
                    images: '='
                },
                link: function(scope, element, attrs) {
                    scope.currentIndex = 0;
                    scope.next = function() {
                        scope.currentIndex < scope.images.length - 1 ? scope.currentIndex++ : scope.currentIndex = 0;
                    };
                    scope.prev = function() {
                        scope.currentIndex > 0 ? scope.currentIndex-- : scope.currentIndex = scope.images.length - 1;
                    };
                    scope.$watch('currentIndex', function() {
                        scope.images.forEach(function(image) {
                            image.visible = false; // make every image invisible
                        });
                        scope.images[scope.currentIndex].visible = true; // make the current image visible
                        $rootScope.showSlider = true;
                    });
                    $interval(function() {
                        scope.next();
                    }, 10000);
                }
            };
        });
Now my problem is understand when the images in background, that are in slider, are loaded so I can remove the loading and show the slider without bad effect. Is there a method that tell me when all images or the first image are loaded? thanks