title: AngularJS remove attributes
body: <p>I have a directive that replaces my custom tag with some regular HTML.
  There are some attributes that I'd like to remove. For example, given the syntax </p>
  
  <pre><code>&lt;ui mybutton width="30"&gt;&lt;/mybutton&gt;
  </code></pre>
  
  <p>my directive transforms it into </p>
  
  <pre><code>&lt;div width="30" class="btn"&gt;bla bla &lt;/div&gt;
  </code></pre>
  
  <p>I want to remove that <code>"width=30"</code> and add <code>style="width:{{old width value here}}"</code></p>
  
  <p>I've been experimenting with the compile and link function. Should I do that in the compile or in the link function?</p>
  
  <p>I thought I had to do it in the compile function because I want to make a modification in the template.</p>
  
  <p>See it live in <a href="http://jsfiddle.net/WptGC/2/">http://jsfiddle.net/WptGC/2/</a> <strong>WARNING: your browser might hang!</strong>
  See it live and safely <a href="http://jsfiddle.net/WptGC/3/">http://jsfiddle.net/WptGC/3/</a> the code that makes everything crash is commented.</p>
  
  <pre><code>.directive('mybutton', function($compile) {
  return {
      restrict: 'A',
      //transclude: true,
      template: '&lt;div class="this is my subscreen div" style="width:{{width}}"&gt;&lt;/div&gt;',
      replace: false,
      /*scope: {
          width: '@',
          height: '@',
          x: '@',
          y: '@'
      },*/
  
      compile: function($tElement, $tAttrs) {
          console.log("subscreen template attrs:");
          console.log($tAttrs);
          var el = $tElement[0];
           //el.getAttribute('width');
          var stylewidth = el.getAttribute('width'); 
          el.removeAttribute('width');
  
           return function(scope) {
              $compile(el)(scope);
           }
      }
  }
  })
  </code></pre>
  
  <p>I'm just getting a strange loop (that console.log shows up a few thousand times)</p>