How to directly update a field by using ng-click in AngularJS ?

Last Updated : 12 Jul, 2025

In this article, we will see how to update the field directly with the help of the ng-click directive in AngularJS, along with understanding different ways to implement it through the implementations.

Any field can be updated with ng-click using a custom JavaScript function. For this, we can make a clickable object in HTML (usually a button) and attach an ng-click directive with it that calls this custom function. The ng-click Directive in AngluarJS is used to apply custom behavior when an element is clicked. It can be used to show/hide some element or it can pop up an alert when a button is clicked.

Syntax:

<element ng-click="expression"> 
    Contents... 
</element>

Example 1: This example calls a function to change the field value after clicking on the button.

HTML

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

<head>
    <title>
        How to directly update a field by using 
        ng-click in AngularJS? 
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
    </script>
</head>

<body>
    <div ng-controller="basicCntrl">
        <h1 style="color:green">
            Welcome to {{name}}!
        </h1>
        
        <!-- on button click the change()
            function is called from $scope -->
        <button type="button" ng-click="change()">
            Click Me 
        </button>
    </div>
  
    <script type="text/javascript">
        var app = angular.module('example', []);
        app.controller('basicCntrl', function($scope) {
            $scope.name = "GFG";
            $scope.change = function() {
                this.name = 'GeeksforGeeks';
            }
        });
    </script>
</body>
</html>

Explanation: The button calls the change function which changes the variable name. The change is reflected on the page because of the {{name}} syntax. For simpler logic such as the one shown in example 1, we can avoid calling the function and changing the variable inside the ng-click directive.

Output:

Example 2: This example changes the variable name inside the ng-click directive.

HTML

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

<head>
    <title>
        How to directly update a field by using 
        ng-click in AngularJS? 
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
    </script>
</head>

<body>
    <div ng-controller="basicCntrl">
        <h1 style="color:green">
            {{name}} Learning Together
        </h1>
        
        <!-- on button click the 
             name is changed directly -->
        <button type="button" ng-click="name='GeeksforGeeks'">
            Click Me 
        </button>
    </div>
    <script type="text/javascript">
        var app = angular.module('example', []);
        app.controller('basicCntrl', function($scope) {
            $scope.name = "GFG";
        });
    </script>
</body>
</html>

Output:

Also, we can use other HTML tags to make the ng-click work such as a <p> tag.

Example 3: This example implements a <p> tag to change the heading content.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        How to directly update a field by using 
        ng-click in AngularJS? 
    </title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js">
    </script>
</head>

<body ng-app="example">
    <div ng-controller="basicCntrl">
        <h1 style="color:green">
            Welcome to {{name}} Learning Portal
        </h1>
        
        <!-- on paragraph click the name is changed directly -->
        <p style="font-family:Arial;" 
           ng-click="name='GeeksforGeeks'">
            Click Me 
        </p>

    </div>
    <script type="text/javascript">
        var app = angular.module('example', []);
        app.controller('basicCntrl', function($scope) {
            $scope.name = "GFG";
        });
    </script>
</body>
</html>