title: Why is only the first row is being displayed from JSON list
body: <p>I have the following table:</p>
  
  <pre><code>&lt;div data-ng-app="myApp"&gt;
      &lt;div data-ng-controller="MyCtrl"&gt;
          &lt;form&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;b&gt;ID&lt;/b&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;b&gt;Name&lt;/b&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;b&gt;Surname&lt;/b&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;b&gt;House&lt;/b&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;b&gt;Address&lt;/b&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;b&gt;Locality&lt;/b&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;b&gt;Contact1&lt;/b&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;b&gt;Contact2&lt;/b&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;b&gt;Contact3&lt;/b&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;b&gt;Reply&lt;/b&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr ng-repeat="telesale in telesales"&gt;
                      &lt;td&gt;{{telesale.ID}}&lt;/td&gt;
                      &lt;td&gt;{{telesale.Name}}&lt;/td&gt;
                      &lt;td&gt;{{telesale.Surname}}&lt;/td&gt;
                      &lt;td&gt;{{telesale.House}}&lt;/td&gt;
                      &lt;td&gt;{{telesale.Address}}&lt;/td&gt;
                      &lt;td&gt;{{telesale.Locality}}&lt;/td&gt;
                      &lt;td&gt;{{telesale.Contact1}}&lt;/td&gt;
                      &lt;td&gt;{{telesale.Contact2}}&lt;/td&gt;
                      &lt;td&gt;{{telesale.Contact3}}&lt;/td&gt;
                      &lt;td&gt;{{telesale.Reply}}&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>controller:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    var myApp = angular.module('myApp', []);
  
    myApp.controller('MyCtrl', ['$scope', '$http', function ($scope, $http) {
  
        GetPersons();
  
        function GetPersons() {
            $http({
                method: 'GET',
  
                url: '/api/data'
            }).
          success(function (data) {
              if (data != null || data != 'undefined') {
                  console.log(data);
                  $scope.telesales = data;
              }
          })
        .error(function (error) {
            $window.alert("Unable to retrieve people" + error.message);
        });
        }
  
    } ]);
  </code></pre>
  
  <p></p>
  
  <p>The data is being retrieved from an api controller which returns a list of 40 objects, however only the first object is being displayed in the table. Why could this be happening?</p>
  
  <p>Screenshot of some of the data retrieved from the api (data crossed out for privacy)<img src="https://i.stack.imgur.com/T6MjH.jpg" alt="enter image description here"></p>
  
  <p>It looks as if the second (and the rest of the objects) are being passed as localities which is an foreign key of another table<img src="https://i.stack.imgur.com/9qr6q.jpg" alt="enter image description here"></p>
  
  <p>API Code:</p>
  
  <pre><code>public HttpResponseMessage GetPeople()
      {
          List&lt;CommonLayer.Telesales&gt; list = new BusinessLayer.Telesales().getUserSession(User.Identity.Name);
          //List&lt;CommonLayer.Localities&gt; list = new BusinessLayer.Localities().getAllLocalities();
          if (list.Count &gt; 1)
          {
              return new HttpResponseMessage()
              {
                  Content = new StringContent(JArray.FromObject(list).ToString(), Encoding.UTF8, "application/json")
              };
          }
          else
          {
              return null;
          }
      }
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/ZAPESS4GHTqVx6Pdq28x?p=preview" rel="nofollow noreferrer">Plunkr</a></p>