In this article I will explain with an example, how to set TextBox value on Button Click using AngularJS.
The AngularJS ng-model directive is used to assign values to HTML elements like TextBox.
 
 
Set TextBox value on Button Click using AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
The HTML DIV consists of an HTML TextBox assigned with ng-model AngularJS directive and an HTML Button assigned with ng-click AngularJS directive.
The TextBox is bound with the Greetings Model variable using the ng-model AngularJS directive and hence when the Greetings Model variable value is updated, the TextBox value will be updated and vice versa.
Note: If you want to learn more about these directives please refer my article Introduction to AngularJS.
 
When the Button is clicked, the SetTextBox function inside the Controller is called and it sets the Greetings Model variable, which ultimately sets the TextBox.
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
            $scope.SetTextBox = function () {
                $scope.Greetings = "Hello Mudassar!";
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <input type="button" ng-click="SetTextBox()" value="Set TextBox">
        <br />
        <br />
        <input type="text" ng-model="Greetings">
    </div>
</body>
</html>
 
 
Screenshot
Set TextBox value on Button Click using AngularJS
 
 
Demo
View Demo
 
 
Downloads
Download Code