title: Angularjs removing dynamically generated rows
body: <p>I have following html and Angularjs controller code to add rows dynamically. </p>
  
  <pre><code>&lt;form name="{{form.name}}"
        ng-repeat="form in forms"&gt;         
    &lt;h2&gt;{{form.name}}&lt;/h2&gt;
    &lt;div ng-repeat="(i,cont) in form.contacts"&gt;
            &lt;input type="text" class="xdTextBox" ng-model="cont.ac"/&gt;
            &lt;input type="text" class="xdTextBox" ng-model="cont.a_number"/&gt;
            &lt;input type="text" class="xdTextBox" ng-model="cont.p_id"/&gt;
    &lt;/div&gt;
    &lt;button ng-click="submit(form)"&gt;Submit&lt;/button&gt;
    &lt;button ng-click="addFields(form)"&gt;Add&lt;/button&gt;
    &lt;hr&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Controller code to add rowsis </p>
  
  <pre><code>$scope.addFields = function (form) {     
     if (typeof  form.contacts == 'undefined') {
           form.contacts = [];
      }
      form.contacts.push({name:'', ac: '', a_number: '', p_id: '' });
  }
  </code></pre>
  
  <p>What I want to do next is after adding rows if i mouse over any row a delete link or button shows up and if one clicks it, it removes that row. 
  Here is the working plunker for the adding rows.
  <a href="http://plnkr.co/edit/9bUnd7t0PyMwykgi0VZR?p=preview" rel="nofollow">http://plnkr.co/edit/9bUnd7t0PyMwykgi0VZR?p=preview</a>
  Please let me know how I can mouse over a row and click the remove button or link to remove that list. 
  Thanks</p>