Hi mahesh213,
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/angular-utils-pagination@0.11.1/dirPagination.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['angularUtils.directives.dirPagination'])
app.controller('MyController', function ($scope) {
$scope.Customers = [
{ Id: 1, Name: "John Hammond", Country: "United States" },
{ Id: 2, Name: "Mudassar Khan", Country: "India" },
{ Id: 3, Name: "Suzanne Mathews", Country: "France"}];
$scope.Add = function (customer, index) {
$scope.Customers.splice(index + 1, 0, { Id: $scope.Customers.length + 1, Name: customer.Name, Country: customer.Country });
};
});
</script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<table class="table table-bordered table-responsive">
<tr>
<th>Id</th>
<th>Name</th>
<th>Country</th>
<th> </th>
</tr>
<tbody dir-paginate="m in Customers|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">
<tr>
<th>{{m.Id}}</th>
<td><input type="text" value="{{m.Name}}" /></td>
<td><input type="text" value="{{m.Country}}" /></td>
<td>
<button type="button" class="btn btn-success btn-sm" ng-click="Add(m,$index)">
<span class="glyphicon glyphicon-plus"></span>
</button>
</td>
</tr>
</tbody>
<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true">
</dir-pagination-controls>
</table>
</div>
</body>
</html>
Demo