Cacher is the code snippet organizer for pro developers

<!-- 1st: install, load file and inject module in the main app -->
<script>
angular.module('appName', ['angular-visible']).config(/*...*/)
</script>

<!-- 2nd: add html element that checks its children for visibility -->
<check-visible
 target-class="class-to-check" <!-- class to look for in child elements -->
 check-delay="500" <!-- delay in millisecunds -->
 check-remove-target="true"> <!-- whether to remove target class when it becomes visible -->
	<some-tag class="class-to-check"></some-tag> <!-- directive to include a template and to call a controller someTagCtrl! -->
</check-visible>


//  3rd: create a boolean inside someTagCtrl to keep track of element already on screen
$scope.alreadyOnScreen = false;

//	4th: add event listener to someTagCtrl
$scope.$on("visible", function(e,data) {
	for(var i =0, len=data.length; i<len; i++) {
		/* do something with the 'data' array, i.e. the array of the visible DOM elements */
	}
});

//	5th: inside someTagCtrl check for elements already on screen when loaded and fire event
angular.element(document).ready(function(){                             //  wait until element coordinates are available
	var YPosition = angular.element(document)
							.find(elementName)[$scope.$index]           //  find element whose position is in question
							.getBoundingClientRect().top;				//  get Y coordinate
	var windowHeight = window.innerHeight;                              //  get window height
	if (YPosition > 0 && YPosition < windowHeight) {                    //  if element is in window by default
		$scope.$broadcast('visible');                                   //  broadcast visible event
		$scope.alreadyOnScreen = true;									//	remember that this element was on screen by default
	}
});