title: Dynamically add angular attributes to an element from a directive
body: <p>I'm trying to build a directive that change loading status on buttons for slow ajax calls. Basically the idea is to set an attribute "ng-loading" to a button element, and let the directive add the rest of stuff.</p>
  
  <p>This is the html code:</p>
  
  <pre><code>&lt;button class="btn btn-primary" name="commit" type="submit" ng-loading="signupLoading"&gt;
    Submit
  &lt;/button&gt;
  </code></pre>
  
  <p>And this is the directive code:</p>
  
  <pre><code>.directive('ngLoading', ['$compile',  function($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true,
      link: function(scope, element, attrs) {
        element.attr('ng-class', '{loading:' + attrs['ngLoading'] +'}');
        element.attr('ng-disabled', attrs['ngLoading']);
        element.append(angular.element('&lt;img class="loading-icon" src="/assets/images/loading-icon.gif"/&gt;'));
        $compile(element.contents())(scope);
      }
    };
  }]);
  </code></pre>
  
  <p>It all looks correct in the rendered HTML, but the attributes added from the directive is not funcioning at all. I can move those attributes to the HTML code and everything works great, but that's quite some redundant code in many places.</p>
  
  <p>I referenced the post <a href="https://stackoverflow.com/questions/21717586/angular-directive-to-dynamically-set-attributes-on-existing-dom-elements">Angular directive to dynamically set attribute(s) on existing DOM elements</a> but it does not solve my problem.</p>
  
  <p>Any comment/suggestion are welcome. Thanks in advance.</p>