title: Angularjs Contenteditable in ng-repeat with row/column actions
body: <p>I have HTML table where its rows and columns are dynamically created by angular js. After a row/column has been added, I would like to have a option that when the user hovers over that row or column it would display a delete button icon clicking which would delete that row/column. For delete column I got it working. So if you see my below demo and hover over to just above top of column you would see a delete icon. </p>
  
  <p>I am having issues with row delete. I want the delete icon to appear to the left of  first row, but it does not appear. The issue is because I am using contenteditable for that row. If I remove that it works and I can see the icon.</p>
  
  <pre><code>contenteditable="true"
  </code></pre>
  
  <p>Here is the relevant code:</p>
  
  <pre><code> &lt;td class="unique-id" contenteditable="true" ng-model="r.id"&gt;{{r.id}}
      &lt;div class="btn-group btn-group-xs"&gt;
        &lt;button ng-show="row == $index" type="button" class="btn" ng-click="deleteRow($index)"&gt;
        &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>Above if I remove contenteditable or make contenteditable="false", I can see the delete icon but not with contenteditable="true". I want to have this row editable so want this property to be true.</p>
  
  <p>Any workarounds to get this resolved or any other solutions.</p>
  
  <p>Below is the codepen demo: <a href="https://codepen.io/anon/pen/bmBXqg" rel="nofollow noreferrer">https://codepen.io/anon/pen/bmBXqg</a></p>