title: AngularJS Material Dialog using component as template
body: <p>I have an angular component which I want to use in an AngularJS Material dialog:</p>
  
  <pre><code>return $mdDialog.show({
      template: '&lt;publish-dialog user="$ctrl.user" target-collection="$ctrl.targetCollection"&gt;&lt;/publish-dialog&gt;',
      controller: function () {
          this.user = user;
          this.targetCollection = targetCollection;
      },
      controllerAs: '$ctrl',
      targetEvent: event,
      clickOutsideToClose: true
  });
  </code></pre>
  
  <p>The problem is, that when defining the template like this, the generated html looks like this:</p>
  
  <pre><code>&lt;md-dialog&gt;
    &lt;publish-dialog&gt;
      &lt;md-toolbar&gt;&lt;/md-toolbar&gt;
      &lt;md-dialog-content&gt;&lt;/md-dialog-content&gt;
      &lt;md-dialog-actions&gt;&lt;/md-dialog-actions&gt;
    &lt;/publish-dialog&gt;
  &lt;md-dialog&gt;
  </code></pre>
  
  <p>The component element is breaking the between <code>md-dialog</code> and m<code>d-toolbar</code>, <code>md-dialog-content</code> and <code>md-dialog-actions</code> leads to a layout break and the <code>md-toolbar</code> and the <code>md-dialog-actions</code> are not fixed.</p>
  
  <p>So my question is, is there a way to only render the component template contents without the component element (<code>&lt;publish-dialog&gt;&lt;/publish-dialog&gt;</code>)?</p>