Input Text Editable in Angular js – Blancer.com Tutorials and projects

I have a problem of trying to make the input text field editable.

Currently, I am unable to make the input text box editable on click of add or edit button.

I have set the values statically in the state objects.

How can I edit the code below to make the input text box editable?

The sample code is as below
HTML

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">

<input type="text" input-disabled="editableInput"/>
<button type="submit" ng-click="editableInput = ! editableInput;" value="submit">Add</button>
<table>
<tr ng-repeat="x in records">
<td><h4>{{x}}</h4></td>
<td><button type="submit" ng-click="editableInput = ! editableInput;" value="submit">Edit</button></td>
</tr>
</table>

</body>
</html>

Script

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    "Alfreds Futterkiste",
    "Berglunds snabbköp",
    "Centro comercial Moctezuma",
    "Ernst Handel",
  ]
});
app.directive("inputDisabled", function(){
    return function(scope, element, attrs){
        scope.$watch(attrs.inputDisabled, function(val){
            if(val) {
                element.removeAttr("disbaled");
            } else {
                element.attr("disabled", "disabled");
            }
        });
    }
});

Any Help would be much appreciated.