directive.js

angular.module('myApp', []).directive('includeIfVisible', function () {
    function isElementInViewport(el) {
        var rect = el.getBoundingClientRect();
        return (
            rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right >= 0 &&
            rect.bottom >= 0 &&
            rect.left <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }
    return function(scope, element, attr) {
        element.scroll(function() {
            var chlds = element.find('[data-ng-include]');
            chlds.each(function () {
                scrolled++;
                if (isElementInViewport(this)) {
                    // Child is visible
                } else {
                    // Child is invisible
                }
            });
        });
    };
});

view.html

<div id="thumbnailPagesWrapper" data-include-if-visible>
  <div data-ng-repeat="p in pages" class="pageThumbnailWrapper">
    <!-- the template functions figures out what template to use but if the child
         is not on the screen `template` needs to know in which case it will return
         and empty string clearing the content -->
    <div data-ng-include data-src="template(p)" scope="p"></div>
  </div>
</div>