title: Injecting a new row anywhere in an ng-repeat
body: <p>I'm working on an invoice website and I would like to be able to add a new row anywhere to my ng-repeat.</p>
  
  <p>Site: <a href="http://completeinvoice.com/" rel="nofollow">http://completeinvoice.com/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;tr id="row-{{$index+1}}" class="item-row" ng-repeat="item in invoice.items"&gt;
      &lt;td class="col-span2"&gt;@Html.TextBoxFor(m =&gt; m.InvoiceColOneDetails, new { id = "cel1-row{{$index+1}}", @class = "invoiceColOneDetails", @placeholder = "{{$index+1}}" })&lt;/td&gt;
      &lt;td class="col-span6"&gt;
          &lt;textarea id="cel2-{{$index+1}}" class="invoiceColTwoDetails" ng-model="item.description" auto-grow&gt;&lt;/textarea&gt;
      &lt;/td&gt;
      &lt;td class="col-span1"&gt;@Html.TextBoxFor(m =&gt; m.InvoiceColThreeDetails, new { id = "cel3-row{{$index+1}}", @class = "invoiceColThreeDetails text-center", @placeholder = "0", @ng_model = "item.hrsQty" })&lt;/td&gt;
      &lt;td class="col-span1"&gt;@Html.TextBoxFor(m =&gt; m.InvoiceColFourDetails, new { id = "cel4-row{{$index+1}}", @class = "invoiceColFourDetails text-center", @placeholder = "0", @ng_model = "item.ratePrice" })&lt;/td&gt;
      &lt;td class="col-span2 relative disabled-field"&gt;@Html.TextBoxFor(m =&gt; m.InvoiceColFiveDetails, new { id = "cel5-row{{$index+1}}", @class = "invoiceColFiveDetails text-right", @placeholder = "0", @Value = "{{rowTotal(item) | currency}}", @disabled = "disabled" })&lt;/td&gt;
      &lt;td class="no-border disabled-field remove-row"&gt;
          &lt;a href="javascript:void(0)" class="remove-item tooltip-right" title="Delete row (Ctrl+Delete)" ng-click="deleteRow($index)"&gt;
              &lt;i class="icon-remove-sign"&gt;&lt;/i&gt;
          &lt;/a&gt;
          &lt;a href="javascript:void(0)" class="remove-item tooltip-right" title="Insert new row" ng-click="insertRow($index)"&gt;
              &lt;i class="icon-add-sign"&gt;&lt;/i&gt;
          &lt;/a&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p><strong>Angularjs</strong></p>
  
  <pre><code>$scope.insertRow = function (index) {
      $scope.invoice.items.push({
          description: null,
          hrsQty: null,
          ratePrice: null
      });
  };
  </code></pre>
  
  <p>This adds a new row to the bottom of the ng-repeat. Is it even possible to add a new row anywhere in the ng-repeat? I'm having a hard time trying to figure this out.</p>