title: Custom elements inside AngularJS directive?
body: <p>I'd like to avoid repeating myself with my page header as much as possible. So, I'm thinking doing something like this:</p>
  
  <pre><code>&lt;header&gt;
      &lt;title&gt;Forms&lt;/title&gt;
      &lt;actions&gt;
          &lt;action ng-click="showNewFormModal()"&gt;New Form&lt;/action&gt;
          &lt;action ng-click="showHelp()"&gt;?&lt;/action&gt;
      &lt;/actions&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>which would desirably result in</p>
  
  <pre><code>&lt;div class="page-header"&gt;
      &lt;div class="left"&gt;
          &lt;h3&gt;Forms&lt;/h3&gt;
      &lt;/div&gt;
  
      &lt;div class="right"&gt;
          &lt;a class="btn btn-default" role="button" ng-click="showNewFormModal()"&gt;New Form&lt;/a&gt;
          &lt;a class="btn btn-default" role="button"&gt;?&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="clearfix"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, <code>&lt;header&gt;</code> contains custom elements, <code>&lt;title&gt;</code>, <code>&lt;actions&gt;</code>, and <code>&lt;action&gt;</code>, which are specific to only the <code>&lt;header&gt;</code> element.</p>
  
  <p>Is such a thing possible in Angular? How would I accomplish this?</p>