title: AngularJS ng-repeat creating three empty rows whien populating table & ng-repeat not repeating
body: <p>I've looked for solutions to these problems, but Angular is very foreign syntax for me, and every method seems to do a lot behind the scenes. I'm a newb to web development and this is my first project consuming an API, using AngularJS, and I just started to explore JavaScript. From my understanding, this is what I have accomplished so far. AngularJS gets the JSON data from a BitBucket API, Angular then creates a JavaScript object to access arrays of data. </p>
  
  <p>Here's the controller.js and index.html snippets respectively:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ngApp = angular.module('ng-app', []);
  ngApp.controller('repoCntrl', function($scope, $http) {
    $scope.commitsData = function() {
      $http.get('https://bitbucket.org/api/2.0/repositories/battlemidget/python-salesforce/commits')
        .success(function(data) {
          $scope.commitsArray = data;
        });
    }
    $scope.commitsData();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app="ng-app"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Page Title&lt;/title&gt;
    &lt;script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js&gt;&lt;/script&gt;
    &lt;script src="controllers.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body ng-controller="repoCntrl"&gt;
    &lt;h3&gt;Public activity in battlemidget's python-salesforce repository&lt;/h3&gt;
    &lt;table border="1" class="table table-striped"&gt;
      &lt;tr&gt;
        &lt;th&gt;Commits&lt;/th&gt;
        &lt;th&gt;Comments&lt;/th&gt;
        &lt;th&gt;Parent
          &lt;br&gt;Branch(es)&lt;/th&gt;
        &lt;th&gt;Date&lt;/th&gt;
        &lt;th&gt;Username&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr ng-repeat="commit in commitsArray"&gt;
  
        &lt;td&gt;{{commit[0].hash.substr(0,6)}}&lt;/td&gt;
        &lt;td&gt;{{commit[0].message}}&lt;/td&gt;
        &lt;td&gt;
          &lt;p&gt;{{commit[0].parents[0].hash.substr(0,6)}}
            &lt;br&gt;{{commit[0].parents[1].hash.substr(0,6)}}
          &lt;/p&gt;
        &lt;/td&gt;
        &lt;td&gt;{{commit[0].date}}&lt;/td&gt;
        &lt;td&gt;{{commit[0].author.raw}}&lt;/td&gt;
  
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I believe <code>ng-repeat</code> is <b>inserting three blank rows into my table</b> when attempting to populate the table.  I would like to know what is causing this and how I can fix it. Thanks. </p>
  
  <p><b>What is causing the three blank rows?</b>
  <b>Here's an image displaying the empty rows and the data from <code>{{commit[0]}}</code>:</b> <a href="http://i.stack.imgur.com/G69xt.png" rel="nofollow">http://i.stack.imgur.com/G69xt.png</a> </p>
  
  <p>Once I solve that issue I need to loop through the commit array <code>from i=0 while i &lt;= commit.length</code> (in this case page one of the api is 30 commits long, but calling  <code>commit.length</code> is not returning anything. </p>
  
  <p><b>Now that I have identified where all the required information in the JSON arrays is, how can I loop through the <code>commit[i]</code> array to populate the table?</b>
  <i>The only solution I've found here is to write a JS loop that parses all the table html to a string and insert it with an id tag in the html. </i> </p>
  
  <p>I'm fairly confident I'm just not using the AngularJS <code>ng-repeat</code> correctly and it should handle this all for me, but the documentation doesn't seem to be helping me much. Any insight would be appreciated. Thanks in advance.</p>