---
title: "Explain the Loops in AngularJS"
description: "Loops are effectively handled using the ng-repeat directive, which allows for the dynamic generation of HTML elements based on collections or objects."
author: "Ashutosh Patel"
published: 2024-06-21
updated: 2024-06-21
canonical: https://www.mindstick.com/blog/304406/explain-the-loops-in-angularjs
category: "angular js"
tags: ["javascript", "angular js", "angularjs ng repeat"]
reading_time: 3 minutes
---
# Explain the Loops in AngularJS
#### Angularjs Loops
Loops are often handled with instructions such as [ng-repeat](https://www.mindstick.com/interview/33921/explain-the-concept-of-ng-repeat-in-angularjs). This guide allows you to iterate object **collections** in your AngularJS [application](https://www.mindstick.com/articles/12824/calculator-application-in-android) and [dynamically create HTML](https://www.mindstick.com/forum/158688/how-can-you-dynamically-create-html-elements-using-jquery) objects based on each element in the collection.
Let’s explore the use of loops in AngularJS,
**Using the ng-repeat Directive**\
The ng-repeat instruction is used to iterate over a collection (such as an array or object) and create HTML elements for each object in the collection.
```html
{{ item }}
```
## In this example
- `ng-app="myApp"` Starts an AngularJS application.
- `ng-controller="MyController"` associates the controller with a `MyController` div, which scopes the objects.
- `ng-repeat="object in objects"` Repeats the object array in scope and provides a
element for each object in the array.
- `{{ item }}` Displays the current item in the list.
**Controller** (`MyController`)
```javascript
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.items = ['Apple', 'Banana', 'Cherry'];
});
```
**Iterating over Objects**\
You can also use `ng-repeat` to iterate over the attributes of the object,
```html
{{ key }}: {{ value }}
```
In this case, the **key** represents the **property name**, and the value represents the corresponding **value** in **myObject**.
\
**Filters using** `ng-repeat`\
AngularJS provides filters to enable `ng-repeat`. For example, you can use `orderBy` to `filter` items or select items based on specific criteria.
```html
{{ item.name }}
```
**Track by Expression**\
When iterating over objects that may be modified or reordered, it is good practice to use `track by` to [improve performance](https://www.mindstick.com/forum/160287/how-can-parameterized-stored-procedures-improve-performance-compared-to-dynamic-sql-queries) and maintain [relationships](https://www.mindstick.com/blog/11850/how-to-build-stronger-relationships-with-your-employees) between DOM elements and their associated data objects.
```html
{{ item.name }}
```
#### Performance Considerations
- Avoid using `ng-repeat` on large collections or heavy packages, as it can affect performance. Use infinite pages or scrolling to efficiently handle [large amounts of data](https://www.mindstick.com/forum/161107/how-does-mongodb-handle-large-amounts-of-data-and-maintain-performance).
- Use a `track by` with a unique identifier (`item.id`) to improve performance by helping AngularJS identify unique items.
## Example-
```html
AngularJS Loop Example