How can I make an input readonly in a row of ng-repeat on click of a button

Question

HTML content:

<!---- HTML Content ---->
<div class="container-fluid" ng-app="myApp"><br>

    <div class="row" ng-controller="mainController">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading clearfix">
                    <h3 class="panel-title pull-left"><a>Home</a></h3>
                </div>
                <div class="panel-body">
                    <form name="frm" ng-submit="addToDo()">
                        <span><input required type="text" ng-model="NewToDo"></span>
                        <button type="submit">Go</button>
                    </form>
                    <br>
                    <button ng-click="clearlist()">Clear List</button>
                    <br><br>

                    <div class="list-group">
                        <a href="#" class="list-group-item active">List Of To Dos</a>
                        <li href="#" class="list-group-item clearfix" ng-repeat="todo in todos">
                            <div class="col-md-10">
                                <div class="input-group">
                                              <span class="input-group-addon" id="basic-addon1">
                                                <input type="checkbox" ng-model="todo.done">
                                                </span>
                                    <input type="text" class="form-control" aria-describedby="basic-addon1"
                                           ng-model="todo.title" ng-readonly="!edit"/>
                                </div>
                            </div>
                            <div class="text-right col-md-2">
                                <label ng-click="first($index); second()" class="btn btn-info" ng-hide="editorEnabled">Edit</label>
                                <label ng-show="editorEnabled">
                                    <label ng-click="save()" class="btn btn-success">Save</label>
                                    <label ng-click="disableEditor()" class="btn btn-warning">cancel</label>
                                </label>
                                <label class="btn btn-danger" ng-click="delete($index)">Delete</label>
                            </div>
                        </li>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script>
    var myApp = angular.module("myApp", []);
    myApp.controller("mainController", ['$scope', function ($scope) {
        $scope.todos = [
            {'title': 'My First To Do', 'done': false}
        ];

        $scope.addToDo = function () {
            $scope.todos.push({'title': $scope.NewToDo, 'done': false});
            $scope.NewToDo = '';
        }

        $scope.clearlist = function () {
            $scope.todos = $scope.todos.filter(function (item) {
                return !item.done;
            });
        }

        $scope.delete = function (at) {
            $scope.todos.splice(at, 1);
        }

        $scope.second = function () {
            $scope.editorEnabled = true;
        }

        $scope.first = function (edit) {
            //$scope.flag = true;
            console.log(edit);
            $scope.edit = true;
        }

        /*$scope.editorReadOnly = function(){
         $scope.editorReadOnly = true;
         }*/

        $scope.save = function () {
            $scope.editorEnabled = false;
            $scope.edit = !$scope.edit;
        }

        $scope.disableEditor = function () {
            $scope.editorEnabled = false;
        }

    }]);
</script>

Answer 1

Now I got your exact question,

Edit Button:

<label ng-click="first($index); editText=false;editorEnabled='true'" class="btn btn-info" ng-hide="editorEnabled" >Edit</label>

Text Box :

<input type="text" class="form-control" aria-describedby="basic-addon1" ng-model="todo.title" ng-disabled="editText" />

Made the necessary changes to flags in the JS file too. Have a look at this fiddle. This is what you wanted to do I suppose :

https://jsfiddle.net/8xqv33uy/1/

Answer 2

You can write like this:

<div ng-repeat="todo in todos">
    <input type="text" ng-model="todo.title" ng-readonly=!todo.editorEnabled" />
    <button ng-click="todo.editorEnabled = true">Disable me</button>
</div>

Update

Your HTML code was hidden from your question since you have not formatted it properly. I'm providing you a basic example:

<li href="#" class="list-group-item clearfix" ng-repeat="todo in todos">
    <div class="col-md-10">
        <div class="input-group">
            <span class="input-group-addon" id="basic-addon1">
                <input type="checkbox" ng-model="todo.done">
            </span>
            <input type="text" class="form-control" aria-describedby="basic-addon1"
                   ng-model="todo.title" ng-readonly="todo.disableEditor"/>
        </div>
    </div>
    <div class="text-right col-md-2">
        <label ng-click="todo.disableEditor = true" class="btn btn-info">Edit</label>
        <label ng-show="!todo.disableEditor">
            <label ng-click="save()" class="btn btn-success">Save</label>
            <label ng-click="disableEditor()" class="btn btn-warning">cancel</label>
        </label>
        <label class="btn btn-danger" ng-click="delete($index)">Delete</label>
    </div>
</li>

Your modified plunkr: https://jsfiddle.net/oynrxkgv/ Search for todo.edit usage and you will see what is happening there.