javascript - I am new to Angularjs, just tried populating multiple json value but it's not working -

        <div ng-controller="studentcontroller" ng-repeat = "student in students | unique = 'rollno' " >          <table  class="profile-info">         <tr>         <th>roll no</th>         <td>{{ student.rollno }}</td>                       </tr>         <tr>         <th>class</th>         <td>{{ student.class }}</td>                       </tr>           <tr>         <th>section</th>         <td>{{ student.section }}</td>                       </tr>            <tr>         <th>sports</th>         <td>{{ student.sports }}</td>                       </tr>           <tr>         <th>other interests</th>         <td>{{ student.otherinterests }}</td>                       </tr>                           </table>         </div>      <---- angular part----> // not able populate json value using follwing script //       <script>     function studentcontroller($scope,$http) {     var url = "aboutme.json";     $http.get(url).success( function(response) {     $scope.students = response.data;     });     }     </script>  <--- json part --- > [    {       "class" : 1,       "rollno" : 1,       "section" : "a",       "sports" : "football",       "otherinterests" : "music",    },    {       "class" : 12,       "rollno" : 2,       "section" : "b",       "sports" : "counter-strike",       "otherinterests" : "music",    } ] 

some small change have made in html.so, ng-repeat work per expextation.

1. use ng-repeat on tr of td instead of whole div.
2. make sure $scope.students having same json shown in json part in post.

working demo :

var myapp = angular.module('myapp',[]);    myapp.controller('studentcontroller',function($scope) {    $scope.students = [     {        "class" : 1,        "rollno" : 1,        "section" : "a",        "sports" : "football",        "otherinterests" : "music"     },    {        "class" : 12,        "rollno" : 2,        "section" : "b",        "sports" : "counter-strike",        "otherinterests" : "music"     }  ];  })

table,th,td {    border:1px solid black;    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="myapp" ng-controller="studentcontroller">   <table class="profile-info">      <tr>          <th>roll no</th>          <th>class</th>          <th>section</th>          <th>sports</th>          <th>other interests</th>      </tr>      <tr ng-repeat="student in students">          <td>{{ student.rollno }}</td>                        <td>{{ student.class }}</td>             <td>{{ student.section }}</td>             <td>{{ student.sports }}</td>            <td>{{ student.otherinterests }}</td>      </tr>                    </table>  </div>