JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<script src="https://raw.github.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
<script src="https://raw.github.com/imakewebthings/jquery-waypoints/master/waypoints.js"></script>
<div ng-app="waypoints" ng-controller="WaypointsController">
<div>
keep scrolling<br>
keep scrolling<br>
</div>
<div ui-jq="waypoint" ui-options="test">
when this div passes off screen the test function is called
</div>
<div>
keep scrolling<br>
keep scrolling<br>
keep scrolling<br>
keep scrolling<br>
</div>
</div>
JavaScript
angular.module('waypoints', ['ui']);
/* Controllers */
function WaypointsController($scope) {
$scope.test = function(){
alert('You have scrolled to an entry.');
}
}