How to iterate over the keys and values with ng-repeat in AngularJS ?
Last Updated :
12 Jul, 2025
The task is to iterate over a JS object (its keys and values) using the ng-repeat directive. This can be done using parenthesis in the ng-repeat directive to explicitly ask for a key-value pair parameter from angularJS. Here the variable key contains the key of the object and value contains the value of the object.
Syntax:
<element ng-repeat="(key, value) in JSObject">
Contents...
</element>Example 1: In this example, we will simply display all the keys and values of a JS object using ng-repeat. In first iteration, key = name and value = "GeeksforGeeks". In the 2nd iteration, key = location and value = "Noida India Sector 136"...This keeps on iterating until all the keys and their values are covered at least once similar to a for-each loop.
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
</head>
<body ng-controller="MyController">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Iterating the keys & values with ng-repeat in AngularJS
</h3>
<div ng-repeat="(key, value) in gfg">\
<!-- First Iteration-->
<p>{{key}} - {{value}}</p>
</div>
</center>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', function($scope) {
$scope.gfg = {
Name: "GeeksforGeeks",
Location: "Noida India Sector 136",
Type: "Edu-Tech",
}
}]);
</script>
</body>
</html>
Output: On loading the page, we see that all the key-value pairs of the objects are already listed there. This is because the ng-repeat is called on load as the HTML gets loaded.
Example 2: In this example, we will loop over a nested object using the ng-repeat directive. In the first iteration, key = diamond and value = {hardness:"Ultra Hard", goodFor:"Display, cutting"} in the next iteration key = gold and value is its respective object. This keeps on iterating like a for-each loop over the key-value pairs of the object materials.
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
</script>
</head>
<body ng-controller="MyController">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Iterating the keys & values with ng-repeat in AngularJS
</h3>
<div ng-repeat="(key, value) in materials">
<h1>{{key}}</h1>
<div ng-repeat="(key1, value1) in value">
<!-- since the "value" variable itself is
an object. We can iterate over its keys
and values again using ng-repeat. -->
<p>{{key1}} - {{value1}}</p>
</div>
</div>
</center>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', function($scope) {
$scope.materials = {
diamond: {
hardness: "Ultra Hard",
goodFor: "Display, cutting"
},
gold: {
hardness: "Hard",
goodFor: "Jewelry"
},
silver: {
hardness: "comparatively soft",
goodFor: "Jewelry, Display"
}
}
}]);
</script>
</body>
</html>
Output:
Similar Reads
How to pass the 2 $index values within nested ng-repeat in AngularJS ? In AngularJS applications, we can create dynamic behavior by passing the $index values within the nested ng-repeat directives. In the application, the $index variable or value is nothing but the index of the current item or the product that is in the ng-repeat loop. We can pass these values using 2
5 min read
How to iterate Angular Keyvalue Pipe Properties in order? The KeyValue Pipe converts a given Object or Map into an array of key-value pairs. We can use this with the ngFor to loop through the object keys. In this article, we will learn How to iterate angular keyvalue pipe properties in order. Here, the order of sequence will be followed exactly in the same
3 min read
How To Display Values With Interpolation In Angular? Angular is a powerful framework for building dynamic web applications. One of its key features is data binding, which allows developers to display and update values seamlessly within the UI. Interpolation is a fundamental technique in Angular that enables the integration of component data directly i
3 min read
How to fetch the details using ng-repeat in AngularJS ? 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 Angul
2 min read
How to iterate over Object in Angular ? Objects consist of a set of key-value pairs, which are known as Properties. All Properties are named in JavaScript objects and the key part represents the Property name, while the value part represents the property Value. Each element(key-value pair) of the object can be utilized to perform a specif
3 min read
How to filter ng-repeat values according to ng-model using AngularJS ? In this article, we will see how to filter the value of the ng-repeat directive according to the ng-model directive using AngularJS. The ng-repeat values can be filtered according to the ng-model in AngularJS by using the value of the input field as an expression in a filter. We can set the ng-model
2 min read