Watch for filtering event in AngularJS – lazy loading images-Collection of common programming errors

I would like to watch for the filtering event from within my directive when filtering on ngRepeat occurs. Is there an event that gets emitted when filtering occurs?

What I am doing is implementing lazy loading of images for a list of thumbnails. It works but when I start filtering, the images that were out of viewport and come into view after filtering need to get their ng-src attribute replaced.

Here is the directive:

TemplateBrowser.directive('lazySrc', function() {
    return function(scope, element, attrs) {
        function replaceSrc() {
            if (element.is(":in-viewport")) {
                attrs.$set('ngSrc', attrs.lazySrc);
            }
        }

        $(window).scroll( function() {
            replaceSrc();
        });

        scope.$watch('filteredTemplates', function() {
            replaceSrc();
        });
    };
});

HTML

  •  
    

    Currently I get this error:

    Error: 10 $digest() iterations reached. Aborting!
    

    TLDR: Instead of watching a filtered collection for changes, is there a way to emit some kind of filtering event that the directive will listen to? (filtering occurs through a search field and a categories selection menu)

    Originally posted 2013-12-02 01:31:51.