Add your scroll listener to your controller. The more function does not really exist, however you have the $scope.more method.
app.controller('ctrl', function ($scope, $firebaseArray, $timeout) { // ORDERED BY TIME: var ref = firebase.database().ref("posts/fun"); var scrollRef = new Firebase.util.Scroll(ref, "time"); $scope.posts = $firebaseArray(scrollRef); scrollRef.scroll.next(5); // AS DATA APPEARS IN DATABASE ORDERED BY TIME: ref.once('value', function(snap) { $scope.rawdata = snap.val(); $scope.$apply(); }); $scope.more = function() { scrollRef.scroll.next(5); }; // Add scroll listener window.addEventListener('scroll', function() { if (window.scrollY === document.body.scrollHeight - window.innerHeight) { $scope.$apply($scope.more); } }); });
Note that I call $scope.more inside $scope.$apply so that the processing area is digested at the end of the call. Indeed, the JS listener in the window scroll event is outside the Angular life cycle, so we need to manually $digest area for Angular to update all its observers and update the HTML. Search the Internet about $scope.$apply if you want to know more about it.
About your first problem
Your Angular application does not start because Angular is never initialized. To do this, you either need to download it synchronously, or use the ng-app directive, or if you do not want to change anything using your code, you can simply add these lines after defining your module and controller:
// Compile the whole <body> with the angular module named "app" angular.bootstrap(document.body, ['app']);