How to array value or Array Object show in table using angularJS

How to array value or Array Object show in table using angularJS ?

         An array object or array value view into  a template using ng-repeat directive. This directive will take key and value to presenting in a template.

Sample array value :

  $scope.rankList = [
  {name:'John', age:25, gender:'boy', rankHolder:5},
  {name:'Jessie', age:30, gender:'girl', rankHolder:4},
  {name:'Johanna', age:28, gender:'girl', rankHolder:6},
  {name:'Joy', age:15, gender:'girl', rankHolder:1},
  {name:'Mary', age:28, gender:'girl', rankHolder:2},
  {name:'Peter', age:95, gender:'boy', rankHolder:3} 
  ];

Example:

<div ng-app="repeatModule">
    <div ng-controller="repeatController">
     <table border="1">
         <tr>
             <th>S.No</th>
             <th>Name</th>
             <th>Age</th>
             <th>Gender</th>
             <th>Rank</th>
         </tr>
     <tr ng-repeat="rank in rankList">
         <td>{{$index+1}}</td>
         <td>{{rank.name}}</td>
         <td>{{rank.age}}</td>
         <td>{{rank.gender}}</td>
         <td>{{rank.rankHolder}}</td>
     </tr>
     </table>      
    </div>
</div>

JavaScript

app = angular.module("repeatModule", []);

app.controller("repeatController", ['$scope', function ($scope) {
   
  $scope.rankList = [
  {name:'John', age:25, gender:'boy', rankHolder:5},
  {name:'Jessie', age:30, gender:'girl', rankHolder:4},
  {name:'Johanna', age:28, gender:'girl', rankHolder:6},
  {name:'Joy', age:15, gender:'girl', rankHolder:1},
  {name:'Mary', age:28, gender:'girl', rankHolder:2},
  {name:'Peter', age:95, gender:'boy', rankHolder:3} 
  ];
}]);

Result: 

Demo