I am using JQuery DataTable Plugin for Sorting , Filtering , Searching from
I have an edit button in my html markup on click of that a modal will open .
Its working fine , on click of edit button it open the modal but only for records on first page ( 5 records per page ).
When I using paging and goes to 2nd page or any other page than jQuery , Angular JS code on edit button does not do anything , neither it show modal .
I tried to check html markup but its valid . If I remove Jquery DataTable Plugin than it works on every record . Why code is not running for rest of records in other the pages
Below is my code to gave an idea about whats happening HTML
<tr id="row36" ng-show="!hiddenrow[36]" role="row" class="odd">
<td id="edit36" class="sorting_1"> 
<a id="editbtn_36" ng-click="SetData('36','11443','Person%20Name','06-10-2017','04-12-2017','PUNJAB','Badaun','N/A')" data-toggle="modal" href="#update_modal">
<i class="fa fa-pencil-square-o fa-lg" aria-hidden="true" style="color:green"></i></a>
</td>
<td>36</td>
<td contenteditable="true">11443</td>
<td contenteditable="true">Yusuf Khan</td>
<td id="dp36" contenteditable="true">06-10-2017</td>
<td id="dp36" contenteditable="true">04-12-2017</td>
<td contenteditable="true">PUNJAB</td>
<td contenteditable="true">Badaun</td>
<td contenteditable="true">N/A</td>
<td>21-11-2017</td>
</tr>
Modal
<div id="update_modal" class="modal">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Update Record ID : {{RecordID}}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
        </div>
        <div class="modal-body">
            <p><input type="text" ng-model="staffid" class="form-control" placeholder="Enter StaffID here"/></p>
            <p><input type="text" ng-model="staffname" class="form-control" placeholder="Enter Staff Name here"/></p>
            <p><input type="text" ng-model="fromdate" class="form-control"  id="dp"/></p>
            <p><input type="text" ng-model="todate" class="form-control" id="dp"/></p>
            <select ng-model="state" ng-options="item for item in StateList" class="form-control"></select>
            <select ng-model="branch" ng-options="item for item in BranchList" class="form-control"></select>
            <p><input type="text" ng-model="reason" class="form-control" placeholder="Enter Reason here"/></p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" ng-click="UpdateSchedule()">Save changes</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
DataTable Plugin Initialization
$('[id^="tbl"]').dataTable();
Angular Js Code
$scope.SetData = function (recordId,staffid,staffname,fromdate,todate,state,branch,reason)
               {
                   $scope.RecordID = recordId.replace('%20',' ');
                   $scope.staffid = staffid.replace('%20', ' ');
                   $scope.staffname = staffname.replace('%20', ' ');
                   $scope.fromdate = fromdate.replace('%20', ' ');
                   $scope.todate = todate.replace('%20', ' ');
                   $scope.state = state.replace('%20', ' ');
                   $scope.branch = branch.replace('%20', ' ');
                   $scope.reason = reason.replace('%20', ' ');
                   $scope.StateList = [];
                   $scope.BranchList = [];
                    $http({
                        //Some Code Here
                    }).then(function mySuccess(response) {
                            $window.alert('Success');                    
                    }, function myError(response) {
                        $window.alert('Warning! It failed.');
                    });
               }
Update 1 for davidkonrad Only

