chat_service.js

getConversation: function (id, endAt) {
  if (endAt) {
    return $firebase($fbCurrent.child('messages').child(id).endAt(null, endAt).limit(16)).$asArray();
  } else {
    return $firebase($fbCurrent.child('messages').child(id)).$asArray();
  }
}

controller.js

$scope.messages = ChatService.getConversation(chatId);
$scope.paginatedMessages = [];

$scope.messages.$loaded().then(function () {
  $scope.endAt = $scope.messages[$scope.messages.length - 1].$id;
  
  var paginatedMessages = ChatService.getConversation(chatId, $scope.endAt);
  paginatedMessages.$loaded().then(function () {
    paginatedMessages.forEach($scope.pushMessageToPaginatedMessages);
    $scope.endAt = paginatedMessages[0].$id; // Next time we'll use this message as endAt offset
  });
});
  
$scope.sendMessage = function (message) {
  $scope.message.$add(message);
   // Here I need a way to push message to paginatedMessages.
   // If I do $scope.pushMessageToPaginatedMessages(message) here,
   // it'll show only in the browser session in which the message
   // was sent and not other browser session which have same
   // $scope.messages
   //
   // If I don't do it here and do something like somehere above, before messages is $loaded
   // $scope.messages.$watch(function (data) {
   //   if (data.event === 'child_added') {
   //     $scope.pushMessageToPaginatedMessages(data);
   //   }
  //  })
  //  It'll populate the paginatedMessages array with all the messages
  //  on first call since 'child_added' is called for every message
  // initially.Defeating the pagination purpose. i.e. to load messages
  // by page gradually.

};

$scope.showMore = function () {
  var paginatedMessages = ChatService.getConversation(chatId, $scope.endAt);
  
  paginatedMessages.$loaded().then(function () {
    paginatedMessages.concat().reverse().forEach($scope.pushMessageToPaginatedMessages);
    $scop.endAt = paginatedMessages[0].$id;
  })
}