Image flicker with directive that checks for missing images

I have written a directive that will replace a missing (404) image with a placeholder image if it doesn't exist, like so....

app.directive('onErrorSrc', function($q) {
    return {
        link: function(scope, element, attrs) {

            function isImage(src) {

                var deferred = $q.defer();

                var image = new Image();
                image.onerror = function() {
                    deferred.reject(false);
                };
                image.onload = function() {
                    deferred.resolve(true);
                };
                image.src = src;

                return deferred.promise;
            }

            isImage(attrs.myNgSrc).then(function(test) {
                attrs.$set('src', attrs.myNgSrc);
                console.log("IS IMAGE");
            }, function (err) {
                console.log("IMAGE ERROR");
                attrs.$set('src', attrs.onErrorSrc);
            });
        }
    }
});

..and while this works great for static pages that are loaded once, it isn't quite right for checking images in a table that refreshes every few seconds. Any missing (404) images in the table result in a flicker every time it refreshes.

I originally had it acting upon the error of the actual element, but I figured that that way, it'd try and load first, fail, then replace the image. I thought this way, it'd at least not try to load the image into the DOM first, then fail, but work out it's missing in the code, then assign the correct image. It appears though that I was wrong!

I'm aware that I'm setting src instead of ngSrc, I couldn't get ngSrc working.

Can anyone offer any advise/assistance? Many thanks.