How to modify and update data table row in angular js?

If you only want one row to show the inputs on clicking its respective modify button you have two options:

1) Attach booleans to each of the JSON indexes of the tabelsData array.

2) Make a mirror array that houses these booleans.

Having two separate booleans in this case is useless, because each one is being treated on a toggle basis:

Here is the core code for doing approach number two since I assume you want your data to remain the same:

JS:

$scope.editingData = {};

for (var i = 0, length = $scope.tabelsData.length; i < length; i++) {
  $scope.editingData[$scope.tabelsData[i].id] = false;
}

$scope.modify = function(tableData){
    $scope.editingData[tableData.id] = true;
};


$scope.update = function(tableData){
    $scope.editingData[tableData.id] = false;
};

---

Html:

<tbody>
    <tr ng-repeat="tableData in tabelsData">
        <td>
            <div ng-hide="editingData[tableData.id]">{{tableData.name | uppercase}}</div>
            <div ng-show="editingData[tableData.id]"><input type="text" ng-model="tableData.name" /></div>
        </td>
        <td>
            <div ng-hide="editingData[tableData.id]">{{tableData.dob}}</div>
            <div ng-show="editingData[tableData.id]"><input type="text" ng-model="tableData.dob" /></div>
        </td>
        <td>
            <div ng-hide="editingData[tableData.id]">{{tableData.emailId}}</div>
            <div ng-show="editingData[tableData.id]"><input type="text" ng-model="tableData.emailId" /></div>
        </td>
        <td>
            <div ng-hide="editingData[tableData.id]">{{tableData.phone}}</div>
            <div ng-show="editingData[tableData.id]"><input type="text" ng-model="tableData.phone" /></div>
        </td>
        <td>
            <div ng-hide="editingData[tableData.id]">{{tableData.address}}</div>
            <div ng-show="editingData[tableData.id]">
                <textarea ng-model="tableData.address"></textarea>
            </div>
        </td>
        <td>
            <button ng-hide="editingData[tableData.id]" ng-click="modify(tableData)">Modify</button>
            <button ng-show="editingData[tableData.id]" ng-click="update(tableData)">Update</button>
            <button ng-hide="viewField">Add</button>
            <button ng-hide="viewField">Remove</button>
        </td>
    </tr>
</tbody>

I made an example: http://plnkr.co/edit/lXq1WB