Adding HTML attributes dynamically with Angular
<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>