title: Adding HTML attributes dynamically with Angular
body: <p>I am attempting to add a HTML attribute to a form field to disable it if a property is true in a JSON file.</p>
  
  <p>On my form field I have added <code>data-is-disabled={{field.rules.disabled}}</code> which is read in from the following from the JSON </p>
  
  <pre><code>"rules" : {
      "disabled": "true"
  }
  </code></pre>
  
  <p>I then have a directive in my module where I am wanting to remove that attribute and replace it with a <code>disabled</code> attribute to disable the field.</p>
  
  <pre><code>app.directive ('isDisabled', function($compile) {
      return {
          restrict: 'A',
          compile: function (element) {
              element.removeAttr("data-is-disabled");
              element.attr("disabled");
              var fn = $compile(element);
              return function(scope){
                  fn(scope);
              };
          }
      }
  });
  </code></pre>
  
  <p>It seems overly complicated, however it is necessary for multiple different field type situations, in this case the field needs to be disabled.</p>
  
  <p>I have tried a few different solutions from around SO, but I haven't got it working yet. The attribute remains as <code>data-is-disabled="true"</code>.</p>
  
  <p>Many thanks in advance.</p>