Запретить редактирование всей ячейки таблицы, разрешить редактирование только по нажатой строке, используя xeditable с angularjs

Question

Я использую x-editable для редактирования таблицы. Он активирует целые ячейки таблицы и строки для редактирования. Мне нужно отредактировать только нажатую строку в одиночку. Код, который я использовал для редактирования таблицы. Как сделать конкретную строку редактируемой, используя x-editable. Внутри тега span я использовал ng-click для отображения формы таблицы. Событие $show() ng-change используется для установки цвета редактируемой ячейки. Я добавил код ниже

Код контроллера:

    $scope.saveTable = function ()
        {
            debugger;
                   for (var i = 0; i < $scope.Roles.length; i++) {
                    debugger;
                    var id = $scope.Roles[i]._id;
                    var rolename = $scope.Roles.RoleName;
                    var isactive = $scope.Roles.IsActive;
                    var description = $scope.Roles.Description;
                    $http.put('/Roleupdate/' + id + '/' + rolename + '/' + isactive + '/' + description).then(function (response) {
                        console.log(response);
                        refresh();
                    })
                }
                     };

//cell color change
    debugger;
    $scope.removeHighlight = function () {
        $(event.currentTarget).closest('form').find("td.highlighted").removeClass("highlighted");
    }
    $scope.applyHighlight = function ($data) 
        {
        var dataSpan = $(event.currentTarget).closest('td');
        if (!dataSpan.hasClass("highlighted")) {
            $(dataSpan).addClass("highlighted");
        }
    }


Html Code: 

<form editable-form name="tableform" oncancel="cancel()" onaftersave="saveTable()">
              <div class="panel-body scrollbar">
           <table class="table table-striped table-bordered table-list">
                  <tbody>

           <tr dir-paginate="Role in Roles| itemsPerPage:8 | filter:Role1 | orderBy:orderByField:reverseSort " ng-class-odd="'odd'">
       <td>
       <span e-ng-change="applyHighlight($data)" editable-text="Role.Name" ng-model="Role.Name"
                                                                            ng-click="tableform.$show()">
                                                                            {{ Role.Name || 'empty' }}

        </span>
        </td>
        <td>
        <div>
         <span e-ng-change="applyHighlight($data)" editable-text="Role.Description" ng-model="Role.Description"
                                                                                  ng-click="tableform.$show()">
                                                                                {{ Role.Description || 'empty' }}
                                                                            </span>
        </div>
        </td>
        <td ng-click="tableform.$show()" align="center">
        <span e-ng-change="applyHighlight($data)" ng-checked="Role.IsActive"
                                                                     editable-checkbox="Role.IsActive" e-form="rowform" ng-click="tableform.$show()">
        <input type="checkbox" ng-model="Role.IsActive" width="20" />
         </span>
        </td>
        </tr>
        </tbody>
        </table>
        </div>
        </div>
              <div class="col col-xs-4">
        <div class="btn-form" ng-show="tableform.$visible" style="float:right">
        <button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary fa fa-save "> Save</button>
        <input type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-danger fa fa-close" value="X Cancel" />
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        </form>

Дайте мне способы достижения этих требований.