title: Reset angular table binded with NgRepeat
body: <p>I have a table that I'm binding with and NG repeat. I have an add button that will add more rows to this table when necessary. I also have and save/Cancel button to save the changes done into that table or to revert the added rows. How do I remove the rows added to this table when I click cancel so I show the initial state of the page?.</p>
  
  <p>To add a new row what I'm doing is:</p>
  
  <pre><code>$(".socialMediaContainer tbody").append("&lt;tr&gt;&lt;td&gt;&lt;input name=\"hdnsocialID\" class=\"hdnSocialID\" type=\"hidden\" value=\"0\"&gt;&lt;input type=\"text\" id=\"txtSocialName\" class=\"txtLabel socialName\" placeholder=\"Name\" maxlength=\"250\" value=\"\"/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type=\"text\" id=\"txtSocialURL\" class=\"txtLabel socialURL\" placeholder=\"URL\" maxlength=\"250\" value=\"\"/&gt;&lt;/td&gt;&lt;td class='DragnDropIcon'&gt;&lt;/td&gt;&lt;td&gt;&lt;a class=\"button orange wImg\"&gt;Upload &lt;input id='fileSocialUpload" + controlId + "' name='fileSocialUpload" + controlId + "' type=\"file\" class=\"file\" onchange= \"aztec.bc.BrandController.UploadSocialPreViewImage(this,'" + id + "');\"  /&gt;&lt;/a&gt;&lt;/td&gt;&lt;td&gt;&lt;img class=\"socialMedia-container socialImg" + controlId + "\" src='/resources/Images/35x35.png' id=\"fileSocialUpload\"&lt;/td&gt;" + socialbuttons + "&lt;/tr&gt;");
  </code></pre>