ng-click function is not working with dir-pagination-controls in Angular Js?

Question

I have implemented the pagination in our website on differs tabs and it is working properly but problem is that after switch the tab we have called another function for get list but simultaneously on-page-change will be trigger every time.i used ng-click it is trigger but not Woking properly tell me, anyone, how to fix this problem?

<div class="tab-pane fade in active">
<div class="container" ng-if="!isNoRecordFound">			

<div class="row hotel-list-box bg_gray margin-b15 boxshadow" 
  dir-paginate="airport in airportlist | itemsPerPage: 10" 
        total-items="total_count" current-page="currentPage" pagination-id="airportPagination">

  <div class="col-md-5 padding-lr0">
    <div class="image-box border-radius10">
      <img ng-src="{{airport.img}}" class="img-responsive">
    </div>
  </div><!-- end of col-md-5 -->
  <div class="col-md-7">
    <div class="content-box">
      <div class="box-heading">
        <h3 class="f-18 black padding-l15">{{airport.name}}</h3>
      </div>
      <div class="row">
        <div class="col-md-8">
          <div class="box-details padding-t20 block">
            <span ng-if="airport.rating == 5">
              <div class="relative inline-block">
                <img src="images/excellent-40x40.png" class="img-responsive padding-l15">
                <span class="clearfix darkgreen f-18"> Excellent</span>
              </div>
            </span>
            <span ng-if="airport.rating == 4">
              <div class="relative inline-block">
                <img src="images/very-good-40x40.png" class="img-responsive padding-l15">
                <span class="clearfix lightgreen f-18"> Very Good</span>
              </div>
            </span>
            <span ng-if="airport.rating == 3">
              <div class="relative inline-block">
                <img src="images/good-40x40.png" class="img-responsive padding-l15">
                <span class="clearfix yellow f-18"> Good</span>
              </div>
            </span>
            <span ng-if="airport.rating == 2">
              <div class="relative inline-block">
                <img src="images/poor-medium.png" class="img-responsive padding-l15">
                <span class="clearfix lightgreen f-18"> Poor </span>
              </div>
            </span>
            <span ng-if="airport.rating == 1">
              <div class="relative inline-block">
                <img src="images/very-poor-40x40.png" class="img-responsive padding-l15">
                <span class="clearfix lightgreen f-18"> Very Poor</span>
              </div>
            </span>
            <span ng-if="airport.rating == 0">
              <div class="relative inline-block">
                <img src="images/poor-40x40.png" class="img-responsive padding-l15">
                <span class="clearfix lightgreen f-18">Not Rated</span>
              </div>
            </span>
          </div>
        </div>
        <div class="col-md-4">
          <div class="box-button margin-t40">

            <button class="border-none white border-radius5 padding-tb10 padding-lr35
                bg_darkblue" data-toggle="modal" data-target="#ratingModel"
                ng-click="getRatingList(airport, 'airport')">
                Rating Chart
            </button>
          </div>
        </div>
      </div>
    </div><!-- end of content-box -->
  </div><!-- end of col-md-7 -->
</div>
</div>
<div class="notFound" ng-if="isNoRecordFound">
Not found any result
</div>
<span ng-if="selectedTab == 'Airport & Services'">
<dir-pagination-controls
     max-size="8"
     direction-links="true"
     boundary-links="true" 
     on-page-change="filterDataInRatingChart(newPageNumber, 'Airport')">
  </dir-pagination-controls>
</span>
</div>

Answer 1

If you want to keep the 'on-page-change' event trigger independent between the elements, than you could use 'pagination-id'.
Here a possible example of usage:
On dir-pagination-controls:

<dir-pagination-controls
 pagination-id="yourIdPagination"
 on-page-change="eventOnPageChange(newPageNumber)">
</dir-pagination-controls>

On table/list your pagination control have to referring:

<table>
 <tr
  dir-paginate="item in items|filter:search|itemsPerPage:10"
  current-page="currentPage"
  pagination-id="yourIdPagination"
  total-items={{total_count}}>
   <td>{{item.Id}}</td>
 </tr>
</table>

So for example if you have two lists on the same page and every list has a own pagination you have to set a different 'pagination-id' for each list. The code would be something like this:

<dir-pagination-controls
     pagination-id="firstIdPagination"
     on-page-change="eventOnPageChange(newPageNumber)">
    </dir-pagination-controls>

 <table>
    <tr
     dir-paginate="item in items|filter:search|itemsPerPage:10"
     current-page="currentPage"
     pagination-id="firstIdPagination"
     total-items={{total_count}}>
      <td>{{item.Id}}</td>
    </tr>
 </table>

<dir-pagination-controls
         pagination-id="secondIdPagination"
         on-page-change="eventOnPageChange(newPageNumber)">
        </dir-pagination-controls>

 <table>
        <tr
         dir-paginate="item in items|filter:search|itemsPerPage:10"
         current-page="currentPage"
         pagination-id="secondIdPagination"
         total-items={{total_count}}>
          <td>{{item.Id}}</td>
        </tr>
 </table>

Meanwhile if you have 2 or more 'dir-pagination-controls' referring to the same list list you've to remove the 'on-page-change' event from the other 'dir-pagination-controls' with the same 'pagination-id' because if not the event would trigger 2 or more times. The code would be something like this:

<dir-pagination-controls
             pagination-id="airportIdPagination"
             on-page-change="eventOnPageChange(newPageNumber)">
            </dir-pagination-controls>

 <table>
        <tr
         dir-paginate="item in items|itemsPerPage:10"
         current-page="currentPage"
         pagination-id="airportIdPagination"
         total-items={{total_count}}>
          <td>{{item.Id}}</td>
        </tr>
 </table>
<!--Notice that I've removed the event 'on-page-change' from the second one, because if not it would trigger twice-->
<dir-pagination-controls
             pagination-id="airportIdPagination">
            </dir-pagination-controls>

I hope those examples help you to figure out.