Edit many same name isolated variables at a time in Angularjs - angularjs

Question

I have a table. Each cell can hold its value as a string or the edit in place template for that datatype.
I render one thing or the other based on the value of the variable "ttt" of that table cell. If ttt=true it renders the editing template if false it renders the value as string.
The way things are set up you can toggle between true and false of a specific cell each time you double-click on it.
I wish to have as well a button at top of the page that toggles all the "ttt" variables between true or false at the same time for all the table cells.
What is the best way to do this the way I have things set up.
Here is the template of the table:
<script type="text/ng-template" id="editabletable">
<div ng-controller="listeditorController" cg-busy="{promise:myPromise, message:' '}">
<div tasty-table bind-resource-callback="getResource" bind-init="init" bind-filters="filterBy">
<div class="table-responsive" style="width:100%;">
<table class="superResponsive" adapt-table style="width:{{theWidth}};margin:0 auto;">
<thead>
<!-- <thead tasty-thead bind-not-sort-by="notSortBy"></thead> -->
<tr>
<th style="max-width:{{columnWidth}}px;" ng-repeat="attobj in rows[0].class_attributes()">
{{ attobj.label }}
</th>
</tr>
<tr>
<td style="max-width:{{columnWidth}}px;" ng-repeat="attobj in header.columns track by $index">
<input ng-if="attobj.filterable" type="text" class="form-control input-sm" ng-model="filterBy[attobj.filterkey || attobj.key]" ng-model-options="{ debounce: 2000 }" />
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="dbo in rows">
<td style="max-width:{{columnWidth}}px;" ng-repeat="attobj in header.columns" ng-dblclick="ttt=!ttt">
<div>
<form name="theForm" novalidate>
<div ng-if="ttt" ng-init="attobj = attobj.attobj" ng-include src="getAttValuesEditorTemplate(dbo, attobj)">
</div>
</form>
<div ng-if="!ttt" ng-repeat="v in dbo.get4(attobj.key) track by $index">
<p ng-if="v.cid">{{ v.displayName() }}</p>
<p ng-if="!v.cid">{{ v }}</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div tasty-pagination bind-list-items-per-page="listItemsPerPage" bind-items-per-page="itemsPerPage" bind-template-url="'/templates/table/pagination.html'"></div>
</div>
</div>
</script>

Answer 1

Ok, the solution I came up with is fairly simple but SLOW.
I added a controller at the table level which defines a scope variable "editGird" defined on load as "false".
On click of the button "Edit gird" the scope variable "editGird" toggles between true and false.
If set to true the cell is rendered like:
<td ng-if="editGird==true" style="max-width:{{columnWidth}}px;" ng-repeat="attobj in header.columns">
<div>
<form name="theForm" novalidate>
<div ng-init="attobj = attobj.attobj" ng-include src="getAttValuesEditorTemplate(dbo, attobj)">
</div>
</form>
</div>
</td>
If editGird == false:
<td ng-if="editGird==false" style="max-width:{{columnWidth}}px;" ng-repeat="attobj in header.columns" ng-dblclick="ttt=!ttt">
<div>
<form name="theForm" novalidate>
<div ng-if="ttt" ng-init="attobj = attobj.attobj" ng-include src="getAttValuesEditorTemplate(dbo, attobj)">
</div>
</form>
<div ng-if="!ttt" ng-repeat="v in dbo.get4(attobj.key) track by $index">
<p ng-if="v.cid">{{ v.displayName() }}</p>
<p ng-if="!v.cid">{{ v }}</p>
</div>
</div>
</td>
Controller:
app.controller('editGirdController', ['$scope',
function ($scope) {
$scope.editGird= false;
$scope.onOff = function() {
if ($scope.editGird == true){
$scope.editGird = false;
$scope.editGirdColor ='#0887A7';
} else{
$scope.editGird = true;
$scope.editGirdColor ='lightGreen';
}
console.log($scope.editGird);
console.log($scope);
}
}
]);
But this is very very slow!!!
On tables which have 25-35 columns it takes 1 second for each 5 rows to render!!!
How can I make this more efficient???