title: Creating a directive with a variable element type
body: <p>I'm trying to create a directive that will change the html element type (h1/h2/h3) by using a drop down selector of "Large", "Medium", "Small".  I want it to also retain attributes on the element.  I have created a fiddle of this example:  <a href="http://jsfiddle.net/H63Z3/1/" rel="noreferrer">http://jsfiddle.net/H63Z3/1/</a></p>
  
  <p>Angular:</p>
  
  <pre><code>angular.module('app', [])
          .controller('example', function ($scope) {
              $scope.type = 'h2';
          })
          .directive('changeType', function ($compile) {
              return {
                  restrict: 'A',
                  link: function (scope, element, attributes) {
                      scope.$watch('type', function () {
                          var attrs = element[0].attributes;
                          var newElement = $('&lt;' + scope.type + '&gt;').text(element.text());
                          for (var i = 0; i &lt; attrs.length; i++) {
                              newElement.attr(attrs.item(i).name, attrs.item(i).value);
                          }
                          element.replaceWith(newElement);
                          $compile(element.contents())(scope);
                      });
                  }
              };
          });
  </code></pre>
  
  <p>HTM &amp; L:</p>
  
  <pre><code>&lt;div ng-app="app" ng-controller="example"&gt;
      &lt;select ng-model="type" ng-options="k as v for (k,v) in { h1: 'Large', h2: 'Medium', h3: 'Small' }"&gt;&lt;/select&gt;
      &lt;h1 change-type&gt;Text&lt;/h1&gt;
  
      &lt;div&gt;{{ type }}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem I see is that the element property is not being updated properly in Angular after a change is made by the drop down.  It seems that the directive is not reapplied to the new element.  I'm unsure if using a compile function is the right answer.</p>
  
  <p>Any help would be greatly appreciated.</p>