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

Last Updated : 12 Jul, 2025

In this article, we will see how to fetch the details with the help of the ng-repeat directive in Angular, along with understanding its implementation through the illustrations. AngularJS contains various types of pre-defined Directives, where most of the directives start with ng which denotes Angular. The ng-repeat directive is used to iterate over an object for its properties. A template is instantiated once an item is from a collection. Every template has its own scope where the loop variable is set to the current collection item and the $index is set to a key or the index of the item.

Syntax:

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

Parameter values:

key: It is a user-defined identifier in an expression that denotes the index of the item.
value: It is also a user-defined identifier that denotes the value assigned to the specific key in an expression.

Example 1: This example shows the basic usage of the ng-repeat directive to fetch the data in a tabular format.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <title>
          Fetching the details using the ng-repeat Directive
     </title>
    <style>
        body {
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
        }

        table {
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body ng-app="myTable">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>
        Fetching the details using the ng-repeat Directive
    </h3>

    <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>

Output:

Example 2: This is another example illustrating the fetching of data using the ng-repeat directive in AngularJS.

HTML

<!DOCTYPE html>
<html ng-app="myApp">

<head>
    <title>Angular ng-repeat</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
        }
        h1 {
            color: green;
        }
        ul {
            display: inline-block;
            text-align: left;
        }
    </style>
</head>

<body ng-controller="MainCtrl">
    <h1>GeeksforGeeks</h1>
    <h3>
        Fetching the details using the ng-repeat Directive
    </h3>
    <h4>Sorting Algorithms:</h4>
    <ul>
        <li ng-repeat="name in names">
            {{name}}
        </li>
    </ul>
    <script>
        var app = angular.module('myApp', []);
        app.controller('MainCtrl', function ($scope) {
            $scope.names = ['Selection Sort', 
                            'Quick Sort', 
                            'Merge Sort', 
                            'Bubble Sort', 
                            'Insertion Sort'];
            console.log($scope.names);
        });
    </script>
</body>
</html>