How to implement Infinite Scrolling using Node.js, Angular.js and Firebase?
<p><strong>UPDATE 8:</strong></p>

<p><strong>CODE:</strong></p>

<pre><code>&lt;% include ../partials/header %&gt;


&lt;script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.firebase.com/libs/firebase-util/0.2.5/firebase-util.min.js"&gt;&lt;/script&gt;
&lt;script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"&gt;&lt;/script&gt;
&lt;script src="https://cdn.firebase.com/libs/angularfire/1.1.4/angularfire.min.js"&gt;&lt;/script&gt;

&lt;script&gt;


  var config = {
     info
  };

  firebase.initializeApp(config);

    var fb = firebase.database().ref("posts/fun");

    var app = angular.module('app', ['firebase']);

    app.controller('ctrl', function ($scope, $firebaseArray, $timeout) {

        $scope.data = [];
        var _start = 0;
        var _end = 4;
        var _n = 5;

        $scope.getDataset = function() {

            fb.orderByChild('id').startAt(_start).endAt(_end).limitToLast(_n).on("child_added", function(dataSnapshot) {

                $scope.data.push(dataSnapshot.val());
                console.log("THE VALUE:"+$scope.data);

            });

            _start = _start + _n;
            _end = _end + _n;

        };


        $scope.getDataset()

    });

    // Compile the whole &lt;body&gt; with the angular module named "app"
    angular.bootstrap(document.body, ['app']);


&lt;/script&gt;


&lt;div class ="containerMarginsIndex"&gt;

   &lt;div ng-controller="ctrl"&gt;

            &lt;div class="fun" ng-repeat="d in data"&gt;
                &lt;h3 class="text-left"&gt;{{d.title}}&lt;/h3&gt;
                    &lt;div class = "postImgIndex"&gt;
                        &lt;a href="details/{{d.id}}" target="_blank"&gt;
                            &lt;img class= "imgIndex" ng-src="/images/uploads/{{d.image}}" &gt;
                        &lt;/a&gt;
                    &lt;/div&gt; 
                &lt;div class="postScore"&gt;{{d.upvotes - d.downvotes}} HP&lt;/div&gt;
            &lt;/div&gt;

    &lt;/div&gt;

&lt;/div&gt;

&lt;% include ../partials/footer %&gt;
</code></pre>

<hr>

<p><strong>SITUATION:</strong></p>

<p>Ok, I have reworked my Firebase database architecture and changed the Firebase rules.</p>

<p>I am now certain the Firebase function returns a value (it is logged in the console).</p>

<p>But I still get the following error:</p>

<p>This HTML:</p>

<pre><code>    &lt;div class="fun" ng-repeat="d in data"&gt;
        &lt;h3 class="text-left"&gt;{{d.title}}&lt;/h3&gt;
            &lt;div class = "postImgIndex"&gt;
                &lt;a href="details/{{d.id}}" target="_blank"&gt;
                    &lt;img class= "imgIndex" ng-src="/images/uploads/{{d.image}}" &gt;
                &lt;/a&gt;
            &lt;/div&gt; 
        &lt;div class="postScore"&gt;{{d.upvotes - d.downvotes}} HP&lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>gets REPLACED by this once RENDERED:</p>

<pre><code>&lt;!-- ngRepeat: d in data --&gt; == $0
</code></pre>

<p>What have I done wrong ?</p>