title: Dynamically change html element in Angular directive
body: <p>Let's say have have a simple template for a directive like this:</p>
  
  <pre><code>&lt;section class="card {{width}} recipe-list-card"&gt;
    &lt;div class="card-top"&gt;
      &lt;h3&gt;{{headerText}}&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="card-bottom"&gt;
      &lt;div ng-transclude&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>In some cases I'd like to use an h2 and in others and h3. Is there a good way to change the element with a directive?</p>
  
  <p>Here's what I have in my directive: </p>
  
  <pre><code>module.exports = function(app) {
  
        app.directive('cardDirective', function() {
          return {
            restrict: 'AC',
            replace: true,
            transclude: true,
            templateUrl: '/templates/card_template.html',
            scope: {
              header: '=',
              headerText: '@',
              width: '@' //two columns, three columns, etc
            }
          }
        })
      }
  </code></pre>
  
  <p>I'd like to assign the header variable to h2, h3 etc. So far I've only been able to get escaped html (the actual tag rendered out like <code>&lt;h2&gt;</code> in the browser).</p>