title: Infinite scroll when scrolling upward inside a div
body: <p>I am building a chat system using AngularJS and Laravel. </p>
  
  <p>I want to have an infinite scroller inside a div container using AngularJS. What I want is a chat box which will show the last 30 chat messages when the user clicks on the username; And when the user scrolls up in the container (not the browser window) then I want to run an AJAX request and fetch the previous 30 records, like we do in the facebook chat application.</p>
  
  <p>Here is my HTML code:</p>
  
  <pre><code>&lt;ul class="chats" ng-repeat="chatData in DataChats"&gt;
      &lt;li&gt;
          &lt;div class="message"&gt;
              &lt;a&gt; {{chatData.sender_fname }} &lt;/a&gt;
              &lt;span class="body"&gt; {{chatData.message }} &lt;/span&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;   
  </code></pre>
  
  <p>and anular js code</p>
  
  <pre><code>$scope.showChat = function(chat_id) {
      $http.get(url+'/chat/'+chat_id).success(function(data){
          $scope.DataChats= data;
      });
  }   
  </code></pre>
  
  <p>I have searched the dependency for AngularJS but I only found this for browser like this one <a href="https://sroze.github.io/ngInfiniteScroll/" rel="nofollow noreferrer">Ng infinite scroll</a>. How can I do the container into a
  <a href="https://i.stack.imgur.com/iQVob.png" rel="nofollow noreferrer">Facebook like chat when we scroll up and it shows previous messages</a>?</p>
  
  <p>This is what I want to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/iQVob.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iQVob.png" alt="goal"></a></p>