title: creating table rows dynamically with AngularJs
body: <p>I have the following app using angular js that's im using to learn it with.  I have a table of rows and I want to dynamically add new rows into the table.  When I click the add button a new row is created, for some reason on occasions the position is incorrect.  Maybe the internal counter for the row is getting messed up but I can't see how or why this is happening..?</p>
  
  <p><strong>Steps to recreate:</strong></p>
  
  <ol>
  <li>Click the first 'add' button - notice the new row immediately below it.</li>
  <li>Click the second 'add' button - notice the new row immediately below it.</li>
  <li>Click the third 'add' button - notice the position is not as expected(?)</li>
  </ol>
  
  <p><strong>I have a plunker available here</strong></p>
  
  <p><a href="https://plnkr.co/edit/WA2K8TNuEE6blNB6zBvZ?p=preview" rel="nofollow">https://plnkr.co/edit/WA2K8TNuEE6blNB6zBvZ?p=preview</a></p>
  
  <p>Can anyone see why this happens?  The code that creates the new row is shown below</p>
  
  <p><strong>Row creation code</strong></p>
  
  <pre><code>$scope.addRow = function(row) {
      var guid = new Date().getMilliseconds();
      var rowDate = row.date;
  
      var rowToAdd = {
          id: guid, 
          date: new Date(rowDate.getFullYear(), rowDate.getMonth(), rowDate.getUTCDay())
      };
  
       $scope.rows.splice(row.id, 0, rowToAdd);  
  };
  </code></pre>
  
  <p>Any help much appreciated?</p>
  
  <p>Thanks,</p>
  
  <p>P.s if you reverse clicking the 'add' buttons, i.e. you click the third, second then the first 'add' button it works as expected - can't see why this makes a difference - I can guess it's a cursor problem but not sure why..</p>
  
  <p>p.p.s the guid was to get around the angular problem with having duplicate keys restriction within an ng-repeat</p>