title: Insert directive template after another element when this one is clicked
body: <p>I'm working on a custom directive.
  This is what I have:</p>
  
  <pre><code>&lt;button myDirective&gt;Click Me&lt;/button&gt;
  </code></pre>
  
  <p>My directive looks like this:</p>
  
  <pre><code>return {
    restrict: 'EA',
    controller: 'Controller',
    replace: false,
    template: '&lt;h3&gt;Test&lt;/h3&gt;', // actually more complex
    link: function( $scope, $element, $attrs ) {
      $element.on( 'click', function() {
        // code, that shows the template
      });
    }
  };
  </code></pre>
  
  <p>Result is:</p>
  
  <pre><code>&lt;button myDirective&gt;Click Me
    &lt;h3&gt;Test&lt;/h3&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>But i want to have something like this:</p>
  
  <pre><code>&lt;button myDirective&gt;Click Me&lt;/button&gt;
  &lt;h3&gt;Test&lt;/h3&gt; &lt;!-- just shown after button is clicked --&gt;
  </code></pre>
  
  <p>After the button  is clicked the template should be shown after the button.</p>
  
  <p>Thank you.</p>