angular-bootstrap 2 paginations, issue in second pagination - angularjs

Question

image showing paginations
I have item list with many tables in which initaily i show headers by loop each table header works as accordion and on click any table header one request send to get data for that header and tbody populate accordingly.
I have applied pagination on headers and its working fine but pagination on any tbody not working.
Below I have mentioned HTML code.
<div class="col-md-12">
<!-- start table one -->
<div class="table table-responsive series-tbl series-tbl-m">
<table data-ng-repeat="series in serieses track by series._id" class="table table-striped" id="headingOne">
<thead class="table-blue">
<tr >
<th width="5%"><input ng-click="checkAllTalks(series._id,series.Selected)" ng-model="series.Selected" selected="{{series.Selected}}" type="checkbox"></th>
<th width="28%">{{series.title}}</th>
<th width="22%">{{series.totalCount || 0}} talks</th>
<th width="15%">{{ series.totalDuration || 0 | timestring }}</th>
<th width="15%">${{series.totalPrice || 0}}</th>
<th width="18%" class="th-action-icon">
<!-- <i class="fa fa-plus"></i> -->
<a ng-click="openUpdateSeriesModal('md',series._id)" href="#"><i class="fa fa-pencil"></i></a>
<i class="fa fa-trash"></i>
<a role="button" ng-click="showTalks(series._id)" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"><i class="fa fa-caret-down"></i></a>
</th>
</tr>
</thead>
<tbody id="series-{{series._id}}" class="panel-collapse collapse in dn allSeriesTalks" role="tabpanel" aria-labelledby="headingOne">
<tr ng-repeat='talk in seriesTalks track by talk._id'>
<td><input ng-click="checkUncheckTalk(talk._id,talk.Selected)" ng-model="talk.Selected" selected="{{talk.Selected}}" type="checkbox"></td>
<td>{{talk.title}}</td>
<td>{{talk.duration || 0 | timestring }}</td>
<td>{{bytesToMB(talk.size) || 0}} mb</td>
<td>${{talk.price || 0}}</td>
<td class="action-item">
<!-- <i class="fa fa-plus icon-gray"></i> -->
<a ng-click="openUpdateTalkModal('md',talk._id)" href="#"><i class="fa fa-pencil icon-gray" ></i></a>
<a ng-click="deleteTalk(talk._id)" href="javascript:void(0);"><i class="fa fa-trash icon-gray"></i></a>
</td>
</tr>
<tr>
<td colspan="6">
<div data-ng-if="totalTalkCount> 10" class="col-md-12">
<div pagination total-items="totalTalkCount"
ng-model="currentTalkPageNo"
max-size="maxSize"
class="pagination-sm pull-right"
boundary-links="true"
ng-change="talkPageChanged(currentSeriesId)"></div>
</div>
<div data-ng-if="totalTalkCount == 0" class="col-md-2">
<div>No record Found.</div>
</div>
</td>
</tr>
</tbody>
</table>
</div> <!-- end table one -->
</div>
<div class="col-md-12">
<div pagination total-items="totalItems"
ng-model="currentPage"
max-size="maxSize"
class="pagination-sm pull-right"
boundary-links="true"
ng-change="pageChanged()"></div>
</div>
And below controller code
//first it is working properly
vm.currentPage = 1;
vm.maxSize = 5;
vm.pageChanged = function () {
console.log('page changed:', vm.currentPage);
vm.getSeriesList();
//$scope.getMembers();
};
//second its not working
vm.currentTalkPageNo = 1;
vm.talkPaginate = false;
vm.talkPageChanged = function (seriesId) {
console.log('page talk changed:', vm.currentTalkPageNo);//each time it shows 1 page no
vm.talkPaginate = true;
vm.showTalks(seriesId);
//$scope.getMembers();
};

Answer 1

remove below code
data-ng-if="totalTalkCount == 0"
in pagination parent div to
data-ng-class="{ 'dn':totalTalkCount <= 10}"
And use
ng-model="$parent.currentTalkPageNo"
instead of
ng-model="currentTalkPageNo"
css
.dn{display:none;}