javascript - How can I disable dynamically an Angular directive? -

i'm working on project using angularjs (html5/css3). in main html file of project, there table fill dinamically using array of controller: controller manages section of html page in table contained.

the html code of table this:

<table class="col-md-12 col-sm-12 col-lg-12 display" id="tableidprocedures"> <thead>     <tr>         <th><span>code</span></th>         <th><span>description</span></th>         <th><span>quantity</span></th>         <th><span>note</span></th>     </tr> </thead> <tbody>     <tr ng-repeat="procedure in procedures">                     <td>{{procedure.codexamination}}</td>         <td>{{procedure.descrexamination}}</td>         <td contenteditable="true">{{procedure.quantityexamination}}</td>         <td>{{procedure.noteexamination}}</td>     </tr> </tbody> 

the table filled correctly controller. now, problem this: if it's pressed particular button of page, want disable "contenteditable" directive third cell of each row of table, making field no longer editable. how can disable dinamically, in javascript code, angular directive? and, consequently, if want re-enable these fields, how can proceed?

for better understanding of "contenteditable" directive, here copy code:

(function() { 'use strict';  angular.module('contenteditable', [])          .directive('contenteditable', function($location) {           return {             require: 'ngmodel',             link: function(scope, element, attrs, ngmodel) {                element.bind('blur change', function() {                 scope.$apply(function() {                   ngmodel.$setviewvalue(element.html());                   // element.html contain value modified                   if($('#drugssection').hasclass('ng-hide') === true){                        // procedures active                       calculatequantityprocedures();                   }else{                       // drugs active                       calculatequantitydrugs();                   }                 });                });                ngmodel.$render = function() {                 element.html(ngmodel.$viewvalue);               };             }           }         })   }()); 

thank in advance help.

you can this:

when button pressed, can set contenteditable false in dom.

<td contenteditable="false">{{procedure.quantityexamination}}</td> 

now in directive:

bind $watch value of contenteditable

 link: function(scope, element, attrs, ngmodel) {       scope.$watch(attrs.contenteditable, function(newval, oldval) {          // unbind events , disable directive if false      });       }