title: How To Make Table Data Editable onClick in HTML using AngularJS?
body: <p>I have a Html Table</p>
  
  <pre><code>&lt;div class="clearfix"&gt;
      &lt;table class="table table-contract-module"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Group Name&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr ng-repeat="cli in creativeGroupMarket"&gt;
                  &lt;td&gt;{{cli.GroupName}}&lt;/td&gt;
                  &lt;td&gt;
                      &lt;a&gt;Edit&lt;/a&gt;
                      &lt;a ng-click="deleteCreativeMarket(cli.GroupID)"&gt;Delete&lt;/a&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>The Table Format Looks Like</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Ra0RX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ra0RX.png" alt="enter image description here"></a></p>
  
  <p>Now When I Click Edit Button here I need user to be able to edit <strong>Group Name</strong> in textbox and Edit button should be replaced by Update.</p>
  
  <p>After I Click Edit button on 1st row of the table the table should Look Like :-</p>
  
  <p><a href="https://i.stack.imgur.com/As8Yi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/As8Yi.png" alt="enter image description here"></a></p>
  
  <p>How Can I do this?</p>