title: Empty table rows with ng-repeat, AngularJS
body: <p>I have input fields that you can submit, and the data that you entered is inserted into an database. This data is then looped out in a table with ng-repeat:</p>
  
  <pre><code>    &lt;table class="table table-striped table-condensed"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Sträcka&lt;/th&gt;
                  &lt;th&gt;Tid&lt;/th&gt;
                  &lt;th&gt;Jämför&lt;/th&gt;
               &lt;/tr&gt;
          &lt;/thead&gt;
              &lt;tr ng-repeat="info in test"&gt;&lt;td&gt;{{info.stracka}}&lt;/td&gt;&lt;td&gt;{{info.tid}}&lt;/td&gt;&lt;td&gt;&lt;input type="checkbox" id="{{info.id}}" class="checkboxfisk" ng-click="testa(info.id)"&gt;&lt;/tr&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>The problem is that, When the database table is empty, and you are submiting data for the first time, 3 empty TR's rows are printed out, after you have hit submit. I used firebug to debug this, and the HTML look like this when I hover on the empty TR-rows:</p>
  
  <pre><code>&lt;table class="table table-striped table-condensed"&gt;
  &lt;thead&gt;
  &lt;tr&gt;
  &lt;th&gt;Sträcka&lt;/th&gt;
  &lt;th&gt;Tid&lt;/th&gt;
  &lt;th&gt;Jämför&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;tr class="ng-scope" ng-repeat="info in test"&gt;
  &lt;td class="ng-binding"&gt;&lt;/td&gt;
  &lt;td class="ng-binding"&gt;&lt;/td&gt;
  &lt;td&gt;
  &lt;input id="" class="checkboxfisk" type="checkbox" ng-click="testa(info.id)"&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr class="ng-scope" ng-repeat="info in test"&gt;
  &lt;td class="ng-binding"&gt;&lt;/td&gt;
  &lt;td class="ng-binding"&gt;&lt;/td&gt;
  &lt;td&gt;
  &lt;/tr&gt;
  &lt;tr class="ng-scope" ng-repeat="info in test"&gt;
  &lt;td class="ng-binding"&gt;&lt;/td&gt;
  &lt;td class="ng-binding"&gt;&lt;/td&gt;
  &lt;td&gt;
  &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;form class="ng-pristine ng-invalid ng-invalid-required" novalidate="" ng-submit="submitForm(userForm.$valid)" name="userForm"&gt;
  </code></pre>
  
  <p>As you can see, there are td's with classname of ng-binding. What is this? Can anyone help me?</p>
  
  <p>Here is my controller:</p>
  
  <pre><code>as.controller('Test', function($scope, $http, $rootScope, testFactory)
  {   
      $http.get($rootScope.appUrl + '/nao/test/test')
          .success(function(data, status, headers, config) {
              $scope.test = data.data;
      });
  
      $scope.form = {};
      $scope.checkboxes = [];
  
      $scope.testa = function(id) {
          $scope.checkboxes.push(id);
      };
  
      $scope.submitForm = function(isValid) {
          if(isValid) 
          {   
              $http.post($rootScope.appUrl + '/nao/test', $scope.form)
              .success(function(data, status, headers, config) {
                  console.log(data);
                  console.log($scope.form);
              }).error(function(data, status) {
  
              });
          }
      };
  });
  </code></pre>
  
  <p>EDIT: The problem was in my backend. I've have forgotten to add a parameter that is returned after that the mysql query is executed.</p>