second page is not updating while using tr dir-paginate - html

Question

I am using onaftersave() function to save the table data. In dir-paginate i am using ng-repeat to read the table row values. I kept itemsperpage is 5. obviously 6th row will be display in second Page. When I try to edit the second page row values it is not updating the second page rows. How to resolve it?
<form editable-form name="tableform1" oncancel="cancel()" onaftersave="saveTable(Manage_Role.Description)">
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default panel-table">
<div class="panel-heading">
<div class="row">
<div class="col col-xs-6">
</div>
<div class="col col-xs-6 text-right">
<button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-sm btn-primary btn-create" title="Add New Role">Add New Role</button>
</div>
</div>
</div>
<div class="panel-body scrollbar">
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th style="width: 25%" align="center">
Name
</th>
<th style="width: 35%">
Description
</th>
<th style="width: 30% " align="center">
IsActive?
</th>
<th style="width: 10% " align="center"><a href="" ng-click="orderByField='IsActive';
reverseSort = !reverseSort" title="Assign">Assign</a></th>
<th style="width: 1%" align="center" ng-show="false">DirtyFlag</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" id="RoleNameID" ng-model="Manage_Role1.RoleName" placeholder="search" class="searchbox" onkeydown="return (event.keyCode!=13);"
/>
</td>
<td>
<input type="text" id="DescriptionID" ng-model="Manage_Role1.Description" placeholder="search" class="searchbox" onkeydown="return (event.keyCode!=13);"
/>
</td>
<td>
<select name="DropFilter" ng-model="Manage_Role1.IsActive" class="searchbox">
<option value="">All</option>
<option value=false>False</option>
<option value=true>True</option>
</select>
</td>
<!--<td></td>-->
</tr>
<tr dir-paginate="Manage_Role in Manage_Roleser | itemsPerPage:5 | filter:DropFilter | filter:Manage_Role1 | orderBy:orderByField:reverseSort "
ng-class-odd="'odd'">
<td ng-click="tableform1.$show()">
<span e-ng-change="applyHighlight($data,$index)" editable-text="Manage_Role.RoleName" ng-attr-title="{{Manage_Role.RoleName}}"
e-form="rowform" ng-click="rowform.$show()">
{{ Manage_Role.RoleName | uppercase }}
</span>
</td>
<td ng-click="tableform1.$show()">
<div>
<span e-ng-change="applyHighlight($data,$index)" editable-text="Manage_Role.Description" e-form="rowform" ng-attr-title="{{Manage_Role.Description}}"
ng-click="rowform.$show()">
{{ Manage_Role.Description || 'empty' }}
</span>
</div>
</td>
<td ng-click="tableform1.$show()" align="center">
<span e-ng-change="applyHighlight($data,$index)" ng-checked="Manage_Role.IsActive" editable-checkbox="Manage_Role.IsActive"
e-form="rowform" ng-click="applyHighlight($data,$index);tableform.$show()">
<input type="checkbox" ng-model="Manage_Role.IsActive" width="20" ng-attr-title="{{Manage_Role.IsActive}}" />
</span>
</td>
<td align="center">
<input type="image" data-toggle="modal" ng-click="Rolepopupclick(Manage_Role._id,Manage_Role.RoleName)" title="Assign UI"
data-target="#Div1" src="App_Themes/Images/AssignUser.png"
alt="Submit" width="28" height="28" />
</td>
<td ng-show="false">
<input type="text" ng-model="Manage_Role.DirtyFlag" ng-show="false" />
</td>
</tr>
</tbody>
</div>
</table>
</div>
<div class="panel-footer">
<div class="row">
<div class="col col-xs-8">
<dir-pagination-controls max-size="5" direction-links="true" boundary-links="true">
</dir-pagination-controls>
</div>
<div class="col col-xs-4">
<div class="btn-form" ng-show="tableform1.$visible" style="float:right">
<button type="submit" ng-disabled="tableform1.$waiting" title=" Save Changes" class="btn btn-primary fa fa-save" ng-click="NotifyClick()"> Save</button>
<input type="button" ng-disabled="tableform1.$waiting" title=" Close Edit Form Without Saving Changes" ng-click="refreshUI();tableform1.$cancel()"
class="btn btn-danger fa fa-close" value="X Cancel" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
controller code:
$scope.saveTable = function ()
{
debugger;
if(NotifyCount!=1){
var RoleNamechk = '';
for (var i = 0; i < $scope.Manage_Roleser.length; i++) {
RoleNamechk = $scope.Manage_Roleser[i].RoleName;
for (var j = 0; j < $scope.Manage_Roleser.length; j++) {
var RoleName = $scope.Manage_Roleser[j].RoleName;
if (RoleNamechk == RoleName) {
count++;
}
}
}
if (count == $scope.Manage_Roleser.length)
{
for (var i = 0; i < $scope.Manage_Roleser.length; i++) {
var id = $scope.Manage_Roleser[i]._id;
var rolename = $scope.Manage_Roleser[i].RoleName;
var isactive = $scope.Manage_Roleser[i].IsActive;
var description = $scope.Manage_Roleser[i].Description;
if (description == "")
{
description = 'empty';
}
if ($scope.Manage_Roleser[i].DirtyFlag == "True")
{
$scope.LoggedinUsers = $cookieStore.get('LoggedinUser');
var updatedBy= $scope.LoggedinUsers;
$http.put('/Roleupdate/' + id + '/' + rolename + '/' + isactive + '/' + description + '/' + updatedBy).then(function (response) {
refresh();
});
}
count=0;
}
$notify.success('Success', 'Role is Updated Successfully');
}
else {
$notify.warning('Warning', 'Role Name is Already Exists');
count = 0;
return '';
}
}
};
in ng-change I am checking dirty flag of selected index because it is updating all the row values. for that I am updating only selected($dirty) row alone. In second page it is not taking table index correctly. If I select 2nd page 3 row it will assume or taking index of the particular page. It should take index of selected row from the over all table row
$scope.applyHighlight = function ($data,index) {
$scope.Manage_Roleser[index].DirtyFlag = "True";
var dataSpan = $(event.currentTarget).closest('td');
if (!dataSpan.hasClass("highlighted")) {
$(dataSpan).addClass("highlighted");
}
}