First you need make a directive for this.

mainApp.directive("loadMoreData", [function() {
         return {
            restrict: 'ACE',
            link: function($scope, element, attrs, ctrl) {
                // alert("check");
                var raw = element[0];
                element.scroll(function() {
                    if(raw.scrollTop == 0){
                       $scope.$apply("loadMoreData(event)");
                    }
                });
            }
        };

}])

Use this in your html like this :-

<div id="msg_container" style="overflow-y:auto" load-more-data>
    </div>

Call a function in your js :-

    var scrollfirst = 0;
            $scope.loadMoreData = function(event){
                // alert("hello");
                // var scrolobj = $(this);
                // var scroll =  scrolobj.scrollTop();

                var scroll = $(window).scrollTop();
                console.log(scroll);
                var getChatHistoryData = {};
                getChatHistoryData['channel'] = channel1;
                getChatHistoryData['start'] = start;
                getChatHistoryData['count'] = count;
                $(".loaderId").show();
                var responsePromise = $http.post( BASE_URL+"getmorehistory",JSON.stringify( getChatHistoryData ) );
                responsePromise.success( function( data, channel1, status, headers, config ) {
                    // alert("success");
                    console.log( JSON.stringify( data ) );
                    $(".loaderId").hide();
                    // scrolobj.scrollTop(5);
                    if(data != '0'){
                       messageHistory(data.messages);
                       //if(data.totalcount == 25){
                       start = start + data.totalcount;

                     }
                    else {
                       loadstatus = 1;
                    }
                    if(loadstatus == 1 && scroll == 0){

                    $(".loaderId").text("Messages").show();
                    }
                    $('#msg_container').animate({scrollTop: '5px'}, 800);
                });

                responsePromise.error( function ( data, channel1, status, headers, config ) {
                    // alert("error");
                    console.log("error");
                    $(".loaderId").hide();
                });

                if(scrollfirst==0){
                    scrollfirst = scrollfirst + 1;
                }
            }

$("#msg_container").prepend("<div class='me loaderId'><img src='img/loader.gif'></div>");
        $(".loaderId").hide();
if(messages.length < 25){
            loadstatus = 1;
            $(".loaderId").text("Messages").show();
        }

This is how you can load more data on scrolling top.