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.
 
 

HTML Markup

The HTML Markup consists of following elements:
DIV – For applying ng-app and ng-controller AngularJS directives.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
TextBox – For displaying value.
The HTML TextBox has been assigned with an AngularJS ng-model directive.
Note: If you want to learn more about ng-model directive, please refer my article Using ng-model directive in AngularJS.
 
Button – For setting the value in the TextBox.
The Button has been assigned with an AngularJS ng-click directive.
Note: If you want to learn more about ng-click directive, please refer my article AngularJS: Implement Button click event using ng-click directive example.
 
<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>
 
 

Setting TextBox value on Button Click using ng-model directive

When the Button is clicked, the SetTextBox function inside the Controller is called and the Greetings Model variable is set.
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.
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.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>
 
 

Screenshot

Set TextBox value on Button Click using AngularJS
 
 

Demo

View Demo
 
 

Downloads

Download Code