How to fetch the details using ng-repeat in AngularJS?

AngularJS consists of various types of pre-defined Directives. Most of the directives start with ng where ng is equivalent to Angular.

ng-repeat:
The ng-repeat directive is used to iterate over an object for its properties. A template is instantiated once an item from a collection. Every template has its own scope where the loop variable is set to the current collection item and $index is set to a key or the index of the item.
Syntax

filter_none

edit
close

play_arrow

link
brightness_4
code

<element ng-repeat="(key, value) in Obj"></element>

chevron_right


where key and value can be used as a user-defined identifier in an expression.
Example:- This example shows the usage of the ng-repeat directive.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<script src=
</script>
<body ng-app="myTable">
<h2 style = "color:green">GeeksForGeeks</h2>
  
<table ng-controller="control" border="2">
<tr ng-repeat="x in records">
  <td>{{x.Country}}</td>
  <td>{{x.Capital}}</td>  
</tr>
</table>
  
<script>
var app = angular.module("myTable", []);
app.controller("control", function($scope) {
  $scope.records = [
    {
      "Country" : "India",
      "Capital" : "Delhi"
    },
    {
      "Country" : "America ",
      "Capital" : "Washington, D.C. "
    },
    {
      "Country" : "Germany",
      "Capital" : "Berlin"
    },
    {
      "Country" : "Japan",
      "Capital" : "Tokyo"
    }
  ]
});
</script>
  
</body>
</html>

chevron_right


Output: