title: Change p tag to input
body: <p>I'm using AngularJS to build a small SPA. Coming from a jQuery background I have trouble with things like DOM manipulation (or lack thereof) in AngularJS. I have an ng-repeat that creates tr's - what I'd like to happen, is when the end-user clicks on one of the p tags within the td, it converts into an editable input field.</p>
  
  <p>From:<br>
  <img src="https://i.imgur.com/rSivWfD.png" alt="ng-repeat initial"></p>
  
  <p>On p tag click:<br>
  <img src="https://i.imgur.com/wof8nPj.png" alt="ng-repeat with edit"></p>
  
  <p>Here's the code that I currently have:<br>
  index.html<br>
  <code>&lt;tr ng-repeat="test in tests"&gt;
      &lt;td&gt;
          &lt;span ng-click='edit()'&gt;{{test.name}}&lt;/span&gt;
      &lt;/td&gt;
  &lt;/tr&gt;</code></p>
  
  <p>controllers.js<br>
  <code>$scope.edit = function() {
      something in here that will help me convert to input type='text'
  }</code></p>
  
  <p>I'm thinking I need to use a directive, so if someone can point me in the right direction or let me know what I can do, that would be greatly appreciated.</p>
  
  <p>Thank you for all the help.</p>