AngularJS can't fetch more than 4 records <p><em>The following code is for an AngularJS code to read data from a .txt file and echo out on the webpage. It works just fine for the entered records in the .txt file, but upon increasing the number of records above 4, the code fails to work. What could be wrong?</em></p> <p><em>Index.html</em></p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Angular JS Includes&lt;/title&gt; &lt;style&gt; table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h2&gt;AngularJS Sample Application&lt;/h2&gt; &lt;div ng-app="" ng-controller="studentController"&gt; &lt;table&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Roll No&lt;/th&gt; &lt;th&gt;Percentage&lt;/th&gt; &lt;/tr&gt; &lt;tr ng-repeat="student in students"&gt; &lt;td&gt;{{ student.Name }}&lt;/td&gt; &lt;td&gt;{{ student.RollNo }}&lt;/td&gt; &lt;td&gt;{{ student.Percentage }}&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;script&gt; function studentController($scope,$http) { var url="data.txt"; $http.get(url).success( function(response) { $scope.students = response; }); } &lt;/script&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"&gt;&lt;/script&gt; &lt;/body&gt; </code></pre> <p><em>Data.txt</em></p> <pre><code>[ { "Name" : "Collin James", "RollNo" : 101, "Percentage" : "81.5%" }, { "Name" : "Michael Ross", "RollNo" : 201, "Percentage" : "70%" }, { "Name" : "Robert Flare", "RollNo" : 191, "Percentage" : "75%" }, { "Name" : "Julian Joe", "RollNo" : 111, "Percentage" : "77%" } ] </code></pre>