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

Hello,
  Not sure how to do this...need some advise/ snippet/links ..

Have  a list of names on the server..I created  a Page that has a button "load more"...

When the user access the page . I would like following

1: call the APi to bring back 40 record ( have this logic)
2: Only display 20 records on the UI
3: When the user press the button "load more". I would like to
   A: Load the next 20 record (that was retrieve above) and render it in UI
   b: Make an Async call to get the next 20 record and keep it in memory

4: #3 continue as long as their are records or user stop pressing the "load more" button,,



Thanks for your help..