title: How can I make an input readonly in a row of ng-repeat on click of a button
body: <p>HTML content:</p>
  
  <pre><code>&lt;!---- HTML Content ----&gt;
  &lt;div class="container-fluid" ng-app="myApp"&gt;&lt;br&gt;
  
      &lt;div class="row" ng-controller="mainController"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div class="panel panel-primary"&gt;
                  &lt;div class="panel-heading clearfix"&gt;
                      &lt;h3 class="panel-title pull-left"&gt;&lt;a&gt;Home&lt;/a&gt;&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;form name="frm" ng-submit="addToDo()"&gt;
                          &lt;span&gt;&lt;input required type="text" ng-model="NewToDo"&gt;&lt;/span&gt;
                          &lt;button type="submit"&gt;Go&lt;/button&gt;
                      &lt;/form&gt;
                      &lt;br&gt;
                      &lt;button ng-click="clearlist()"&gt;Clear List&lt;/button&gt;
                      &lt;br&gt;&lt;br&gt;
  
                      &lt;div class="list-group"&gt;
                          &lt;a href="#" class="list-group-item active"&gt;List Of To Dos&lt;/a&gt;
                          &lt;li href="#" class="list-group-item clearfix" ng-repeat="todo in todos"&gt;
                              &lt;div class="col-md-10"&gt;
                                  &lt;div class="input-group"&gt;
                                                &lt;span class="input-group-addon" id="basic-addon1"&gt;
                                                  &lt;input type="checkbox" ng-model="todo.done"&gt;
                                                  &lt;/span&gt;
                                      &lt;input type="text" class="form-control" aria-describedby="basic-addon1"
                                             ng-model="todo.title" ng-readonly="!edit"/&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div class="text-right col-md-2"&gt;
                                  &lt;label ng-click="first($index); second()" class="btn btn-info" ng-hide="editorEnabled"&gt;Edit&lt;/label&gt;
                                  &lt;label ng-show="editorEnabled"&gt;
                                      &lt;label ng-click="save()" class="btn btn-success"&gt;Save&lt;/label&gt;
                                      &lt;label ng-click="disableEditor()" class="btn btn-warning"&gt;cancel&lt;/label&gt;
                                  &lt;/label&gt;
                                  &lt;label class="btn btn-danger" ng-click="delete($index)"&gt;Delete&lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      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;
          }
  
      }]);
  &lt;/script&gt;
  </code></pre>