How to update an array element in AngularJS ?

Last Updated : 23 Jul, 2025

Given an array with an initial array of elements & the task is to update an array element using AngularJS. To update a particular item in an array, there are 2 ways, i.e., either by its value or by its index. Here, we will use the concept of the Property accessors method that is used to access the properties of an object using the bracket notation.

Approach: In the first example, the element is updated by its value. Here, we need to check the index of the first occurrence of the search element, provided as a parameter to the function. Then, assign the new value to it.

Example 1: This example describes updating an array element by its value. Here, we have used the Array indexOf() Method to find the index of the first occurrence of the search element.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>
    <script>
        var myApp = angular.module('app', []);
        myApp.controller('controller', function ($scope) {
            $scope.array = ['Geeks', 'Geek', 'gfg', 'GFG'];
            $scope.updateEl = function (item) {
                var index = $scope.array.indexOf(item);
                if (index > -1) {
                    $scope.array[index] = 'GeeksforGeeks';
                }
            };
        });
    </script>
</head>

<body style="text-align: center">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h3>
        How to update an array element in AngularJS
    </h3>
    <div ng-app="app">
        <div ng-controller="controller">
            <p>Update element in array = {{array}}</p>
            <input type="button" 
                   value="Update element 'gfg' " 
                   ng-click="updateEl('gfg')" />
        </div>
    </div>
</body>
</html>

Output:

Approach: In the second example, the element is updated using the index. Here, we need to check the index of the search element that is provided as an argument to the function, then assign the new value using its index.

Example 2: This example describes updating the array element using an index.

HTML

<!DOCTYPE HTML>
<html>

<head>
    <script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js">
    </script>
    <script>
        var myApp = angular.module("app", []);
        myApp.controller("controller", function ($scope) {
            $scope.array = ['Geeks', 'Geek', 'gfg', 'GFG'];
            $scope.updateEl = function (index) {
                if (index > -1) {
                    $scope.array[index] = 'GeeksforGeeks';
                }
            };
        });
    </script>
</head>

<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to update an array
        element in AngularJS
    </h3>
    <div ng-app="app">
        <div ng-controller="controller">
            <p>Update element in array = {{array}}</p>
            <input type="button" 
                   value="Update element at index 3 "
                   ng-click="updateEl(3)">
        </div>
    </div>
</body>

</html>