title: ng-click to replace DOM element with angular directive
body: <p>So I was wondering if it was possible to have an ng-click statement on a span that when clicked would replace the spans content with a directive (with it's template, bindings, etc)?</p>
  
  <p>Example</p>
  
  <pre><code> &lt;div class="col-xs-12"&gt;
      &lt;span ng-click="edit"&gt; {{ user.name }} - {{ user.lastWin }} &lt;/span&gt;
          &lt;button ng-click="removeUser(user.name)" class="btn btn-danger pull-right margin-right-10"&gt;Remove User&lt;/button&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>the edit would then be this:</p>
  
  <pre><code>&lt;form name="editUser"&gt;
    &lt;input type="text" name="name" ng-model="name" placeholder="Name"/&gt;
    &lt;input type="text" ng-model="lastWin" placeholder="Last Win"/&gt;
  &lt;/form&gt;
  &lt;button ng-click="editUser($index, { name: name, lastWin: lastWin })" class="btn"&gt;Save&lt;/button&gt;
  </code></pre>
  
  <p>what would i have to do on my controller to get it to swap everything correctly?</p>