how to do Asynchronous loading--javascript/Angular..

here is an example I saw that has the load more concept --http://jsfiddle.net/api/post/library/pure/

but it does not pre-load the next batch of data....

(your link points to an empty jsfiddle)

This is more of less the same as the infinite scroll technique, where the user can scroll down a list and when is almost reaching the end, a new batch of records gets added to the list.

In your case you should have a (angularjs) factory that isolates this logic.
In this factory you should keep the list in memory, that will start with the initial 40 items and the next will be added to it.
In this same factory you must have a method called getNextPage that implements the paging logic you described.
The main idea is:
    - if the items list is empty, get the double of the page size starting from the beginning
        > get the first [pagesize] elements in the list
        > track the index of the last item retrieved (it might have been less than 20)
        > if you got less than [pagesize] is because your in the last page. You can use this information to avoid useless calls to the server and potentially disable the "Get More" button.
    - if the items list have elements, pick [pagesize] elements
       > if you gor [pagesize] elements, do the ajax call to get [pagesize] more
       ... behave like above, tracking the last item index


If you know how to do this without the pre-fetching logic, adding it is quite easy.

Thanks... I will review

The fiddle is here --http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/paginating-using-infinite-results.html