angularjs:-How to add/Trigger more data on click events

Hi I am a newbie in angularjs and wanted to implement how to display or to make a call depending on a click event.

I have the following Html in which I want to display/make a call to the api to get the value in an incremental fashion.

<div class='tab-contents'>
        <div class='tab clearfix' ng-show="userLogged=='on' && currentActiveTab == 'recs'">
          <div class='item' ng-repeat='p in programs.yourrecs' home-tab-item watchable="p"></div>
          <div class = 'recs-spin' ng-show = 'programs.yourrecs == 0 && recsLoaded == false'> </div>
          <div ng-show="programs.yourrecs == 0 && recsLoaded == true" class="noResultsBlock">Favorite your programs &amp; channels and help us recommend!</div>
          <div class='clearfix' ></div>
          <a href='#' class='more' style="display:block;">{{programs.yourrecs.length}}</a>
        </div>

The code I am trying to make changes in is the following :-

$scope.loadRated = function(pageno){
        // call api
        $scope.pageNo=1;
        var $ratedSpinner = $('.rated-spin');
        loading('show',{element: $ratedSpinner});
        userAPI.topRated({userid: $rootScope.getUser().userid}, function(r){
            $scope.ratedLoaded = true;
            loading('hide',{element: $ratedSpinner});
            //$scope.programs.rated = r.gettopratedhomepage.topratedprogrammelist;
            //for(i=0; i<$scope.programs.rated.length; i++){
            ////abbreviates the month
            //$scope.programs.rated[i].timestring = abbrMonth($scope.programs.rated[i].timestring) ;
            //}
            //$scope.loadRated(r.gettopratedhomepage.topratedprogrammelist);
            if( $scope.pageNo == 1 && !$rootScope.device.isMobile && !$rootScope.device.isTablet && !$rootScope.device.isTouch ) {
                $scope.programs.rated = r.gettopratedhomepage.topratedprogrammelist;
            }
            else{
                $scope.pageNo++;
                $scope.programs.rated = r.gettopratedhomepage.topratedprogrammelist;
            }
            // called with timeout for dom creation
            setTimeout(function(){
                if(openTabIndex === 1) {
                    showTab(openTabIndex);
                }
                showMoreOnTab(1);
            }, 5);
        });
    };

function showTab(index, newindex){
    // highlight corret button
    $tabButtons.removeClass('active');
    $tabButtons.eq(index).addClass('active');
    // $moreButtons.css('background-position','0 -542px'); // default image is +
    $moreButtons.removeClass('less');
    $tabs.hide().eq(index).show();
    openTabIndex = index;
    checkIfItemsAreDisplayed(index);
  };

  /*
    Function to check if all items are displayed, if yes, then hide +/- icon.
  */
  function checkIfItemsAreDisplayed(index){
    var $tab = $tabs.eq(index);
    var $items = $tab.find(".item");
    var totalItems = $items.length;
    var visibleItems = $items.filter(":visible").length;
    var displayLimit = (Modernizr.mq("screen and (min-width:1768px) and (max-width:2024px)"))? 8:8;         //originally 4:6

    if(totalItems > 0 && totalItems > displayLimit) {
      // if(totalItems == visibleItems || !totalItems || totalItems <= displayLimit){
      if(totalItems == visibleItems) {
        $moreButtons.addClass('less');
      }
      $moreButtons.show();
    }else{
      $moreButtons.hide();
    }
  }

  function showMoreOnTab(index){
    // display container
    $scope.elements();
    $channelTabs.show();
    // Show loading indicator
    var visibleMoreButtons = $moreButtons.filter(':visible').length;
    if(visibleMoreButtons) {
      $moreButtons.addClass('loading');
      loading('show', {element: $moreButtons});
    }

    var $tab = $tabs.eq(index);
    var numberOfItems = (Modernizr.mq("screen and (min-width:1768px) and (max-width:2024px)"))? 8:8;

    var $items = $tab.find(".item");
    // retrive current page based in the amount of items displayed
    var currentPage = Math.ceil($items.filter(":visible").length / numberOfItems);
    var currentPageLength = (currentPage * numberOfItems);
    var nextPageLength = ((currentPage+1) * numberOfItems);

    // hide to original state
    if($items.filter(":visible").length == $items.length){
      // $moreButtons.css('background-position','0 -542px');
      $moreButtons.removeClass('less');
      $items.hide().filter(':lt(' + numberOfItems + ')').show();
      // Hide loading indicator
      loading('hide', {element: $moreButtons});
      $moreButtons.removeClass('loading');

      if(Modernizr.mq("screen and (min-width:768px) and (max-width:1024px)")) {
        $('body, window').animate({scrollTop: $moreButtons.position().top - 1250 + 'px'});
      }else{
        $('body, window').animate({scrollTop: $moreButtons.position().top - 500 + 'px'});
      }

      return false;
    }
    // display next page
    $items.filter(':lt(' + nextPageLength + ')').show();

    // Hide loading indicator
    loading('hide', {element: $moreButtons});
    $moreButtons.removeClass('loading');
    // All items are shown
    if(nextPageLength >= $items.length){
      // change the pic
      if($items.filter(":visible").length == $items.length){
        // $moreButtons.css('background-position','-154px -542px');
        $moreButtons.addClass('less');
      }
    }
  }

Now in the current scenario I am getting data from the first page of the api call and the data(here 10) is getting displayed in the ui.The thing I want to implement is that I want to display all the data which is present in the database ..In short I want to increment the page no till the is data present and want to display a message when there is no more data available.

The more button is used to indicate there is data present and less is used to implement there is no more data present and the page(data) should minimize.

I tried to increment the page no in the code to make the call but am getting stuck on it. Please help me with it.

Also tried to implement the below post..Didn't help me:-

show a div on a button click using angularjs and HTML

Thanks