---
title: "How can you optimize large lists in AngularJS using pagination or lazy loading?"  
description: "How can you optimize large lists in AngularJS using pagination or lazy loading?"  
author: "Ravi Vishwakarma"  
published: 2025-03-30  
updated: 2025-03-30  
canonical: https://www.mindstick.com/interview/34019/how-can-you-optimize-large-lists-in-angularjs-using-pagination-or-lazy-loading  
category: "angular js"  
tags: ["javascript", "angular js"]  
reading_time: 5 minutes  

---

# How can you optimize large lists in AngularJS using pagination or lazy loading?

When dealing with large lists in **AngularJS**, using **pagination** or **lazy loading** can significantly improve performance by reducing the number of items rendered at a time. Here’s how to implement both approaches:

#### 1. Pagination in AngularJS

**Method 1: Using** `limitTo` **and Custom Pagination**

You can use AngularJS’s built-in `limitTo` filter along with a pagination mechanism.

## Example:

## Html Code -

```html
<div ng-repeat="item in items | limitTo: itemsPerPage : (currentPage - 1) * itemsPerPage">
  {{ item.name }}
</div>

<!-- Pagination Controls -->
<button ng-disabled="currentPage == 1" ng-click="prevPage()">Previous</button>
<span>Page {{currentPage}} of {{totalPages}}</span>
<button ng-disabled="currentPage == totalPages" ng-click="nextPage()">Next</button>
```

## Controller:

```javascript
app.controller('PaginationController', function($scope) {
    $scope.items = []; // Assume this contains a large dataset
    $scope.itemsPerPage = 10;
    $scope.currentPage = 1;

    $scope.totalPages = Math.ceil($scope.items.length / $scope.itemsPerPage);

    $scope.nextPage = function() {
        if ($scope.currentPage < $scope.totalPages) {
            $scope.currentPage++;
        }
    };

    $scope.prevPage = function() {
        if ($scope.currentPage > 1) {
            $scope.currentPage--;
        }
    };
});
```

**Method 2: Using** `ui.bootstrap` **Pagination Component**

If you are using **Angular UI Bootstrap**, you can use its pagination directive:

## HTML Code -

```html
<div ng-repeat="item in pagedItems[currentPage]">
    {{ item.name }}
</div>

<uib-pagination total-items="items.length" ng-model="currentPage" items-per-page="itemsPerPage"></uib-pagination>
```

## Controller :

```javascript
app.controller('PaginationController', function($scope) {
    $scope.items = []; // Assume this contains a large dataset
    $scope.itemsPerPage = 10;
    $scope.currentPage = 1;
});
```

#### 2. Lazy Loading Large Lists

Lazy loading ensures that only a portion of the data is loaded initially, and more data is fetched as the user scrolls.

**Method 1: Using** `ngInfiniteScroll`

`ngInfiniteScroll` is a third-party library that helps in implementing infinite scrolling.

## Installation:

```plaintext
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.3.0/ng-infinite-scroll.min.js"></script>
```

## HTML:

```html
<div ng-repeat="item in items" infinite-scroll="loadMore()" infinite-scroll-distance="2">
    {{ item.name }}
</div>
```

## Controller:

```javascript
app.controller('LazyLoadController', function($scope, $timeout) {
    $scope.items = [];
    $scope.limit = 10;

    function generateItems(start, end) {
        for (let i = start; i < end; i++) {
            $scope.items.push({ name: "Item " + (i + 1) });
        }
    }

    // Load initial data
    generateItems(0, $scope.limit);

    $scope.loadMore = function() {
        $timeout(function() {
            generateItems($scope.items.length, $scope.items.length + 10);
        }, 1000); // Simulating an API delay
    };
});
```

## Method 2: Server-Side Pagination (API-Based)

If data is fetched from a server, it's best to load data **on-demand** instead of loading everything at once.

## Controller:

```javascript
app.controller('ServerPaginationController', function($scope, $http) {
    $scope.items = [];
    $scope.page = 1;
    $scope.pageSize = 10;
    $scope.loading = false;

    $scope.loadMore = function() {
        if ($scope.loading) return;
        $scope.loading = true;

        $http.get('/api/items?page=' + $scope.page + '&size=' + $scope.pageSize)
            .then(function(response) {
                $scope.items = $scope.items.concat(response.data);
                $scope.page++;
                $scope.loading = false;
            });
    };

    // Initial Load
    $scope.loadMore();
});
```

#### Conclusion

1. **Use Pagination** when users need to navigate structured data efficiently.
2. **Use Lazy Loading** for infinite scrolling when a user is expected to load more content dynamically.
3. **Use Server-Side Pagination** for large datasets to reduce the initial load time and improve performance.

## Answers

### Answer by Ravi Vishwakarma

When dealing with large lists in **AngularJS**, using **pagination** or **lazy loading** can significantly improve performance by reducing the number of items rendered at a time. Here’s how to implement both approaches:

#### 1. Pagination in AngularJS

**Method 1: Using** `limitTo` **and Custom Pagination**

You can use AngularJS’s built-in `limitTo` filter along with a pagination mechanism.

## Example:

## Html Code -

```html
<div ng-repeat="item in items | limitTo: itemsPerPage : (currentPage - 1) * itemsPerPage">
  {{ item.name }}
</div>

<!-- Pagination Controls -->
<button ng-disabled="currentPage == 1" ng-click="prevPage()">Previous</button>
<span>Page {{currentPage}} of {{totalPages}}</span>
<button ng-disabled="currentPage == totalPages" ng-click="nextPage()">Next</button>
```

## Controller:

```javascript
app.controller('PaginationController', function($scope) {
    $scope.items = []; // Assume this contains a large dataset
    $scope.itemsPerPage = 10;
    $scope.currentPage = 1;

    $scope.totalPages = Math.ceil($scope.items.length / $scope.itemsPerPage);

    $scope.nextPage = function() {
        if ($scope.currentPage < $scope.totalPages) {
            $scope.currentPage++;
        }
    };

    $scope.prevPage = function() {
        if ($scope.currentPage > 1) {
            $scope.currentPage--;
        }
    };
});
```

**Method 2: Using** `ui.bootstrap` **Pagination Component**

If you are using **Angular UI Bootstrap**, you can use its pagination directive:

## HTML Code -

```html
<div ng-repeat="item in pagedItems[currentPage]">
    {{ item.name }}
</div>

<uib-pagination total-items="items.length" ng-model="currentPage" items-per-page="itemsPerPage"></uib-pagination>
```

## Controller :

```javascript
app.controller('PaginationController', function($scope) {
    $scope.items = []; // Assume this contains a large dataset
    $scope.itemsPerPage = 10;
    $scope.currentPage = 1;
});
```

#### 2. Lazy Loading Large Lists

Lazy loading ensures that only a portion of the data is loaded initially, and more data is fetched as the user scrolls.

**Method 1: Using** `ngInfiniteScroll`

`ngInfiniteScroll` is a third-party library that helps in implementing infinite scrolling.

## Installation:

```plaintext
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngInfiniteScroll/1.3.0/ng-infinite-scroll.min.js"></script>
```

## HTML:

```html
<div ng-repeat="item in items" infinite-scroll="loadMore()" infinite-scroll-distance="2">
    {{ item.name }}
</div>
```

## Controller:

```javascript
app.controller('LazyLoadController', function($scope, $timeout) {
    $scope.items = [];
    $scope.limit = 10;

    function generateItems(start, end) {
        for (let i = start; i < end; i++) {
            $scope.items.push({ name: "Item " + (i + 1) });
        }
    }

    // Load initial data
    generateItems(0, $scope.limit);

    $scope.loadMore = function() {
        $timeout(function() {
            generateItems($scope.items.length, $scope.items.length + 10);
        }, 1000); // Simulating an API delay
    };
});
```

## Method 2: Server-Side Pagination (API-Based)

If data is fetched from a server, it's best to load data **on-demand** instead of loading everything at once.

## Controller:

```javascript
app.controller('ServerPaginationController', function($scope, $http) {
    $scope.items = [];
    $scope.page = 1;
    $scope.pageSize = 10;
    $scope.loading = false;

    $scope.loadMore = function() {
        if ($scope.loading) return;
        $scope.loading = true;

        $http.get('/api/items?page=' + $scope.page + '&size=' + $scope.pageSize)
            .then(function(response) {
                $scope.items = $scope.items.concat(response.data);
                $scope.page++;
                $scope.loading = false;
            });
    };

    // Initial Load
    $scope.loadMore();
});
```

#### Conclusion

1. **Use Pagination** when users need to navigate structured data efficiently.
2. **Use Lazy Loading** for infinite scrolling when a user is expected to load more content dynamically.
3. **Use Server-Side Pagination** for large datasets to reduce the initial load time and improve performance.


---

Original Source: https://www.mindstick.com/interview/34019/how-can-you-optimize-large-lists-in-angularjs-using-pagination-or-lazy-loading

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.