To push selected values from one dynamic table to another dynamic table - angularjs

Question

I have two tables named products and customers:-
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Product Code</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in service track by $index" ng-class="{'ISselected': isSelected(row, $index)}" ng-click="selectedRow(row, $index)">
<td>{{row}}</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Customer Code</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in customers track by $index">
<td>{{row}}</td>
</tr>
</tbody>
</table>
And a button:-
<button type="button" class="btn btn-info">Add</button>
My directive code:-
scope.services = [];
scope.customers = [];
scope.selectedRowID = null;
scope.selectedRow = function(rowID){
scope.selectedRowID = scope.selectedRowID == rowID ? null : rowID;
}
scope.isSelected = function(rowID){
return (scope.selectedRowID == rowID);
}
What I want here is when I select a particular row/value from the 'products' table and press 'add' button then that row/value gets pushed or added to my customers' table. The data inside from both tables are coming from the backend.

Answer 1

You don't need a directive, rather controller functions will do the job by pushing the selected row into customer data.
Here is basic fiddler, which perform similar stuff. hope it helps.

Answer 2

What i understand is for every row you have ADD button so that you can transfer data from one table to another.
First add "ADD" button inside table for every row.
Then Add the ng-click directive to ADD button
<button type="button" class="btn btn-info" ng-click="transferData($index)">Add</button>
Then add this function to your Directive:
$scope.transferData=function(index){
$scope.customers.push($scope.services [index]);
};
This will meet your requirements.