In this article I will explain with an example, how to use ng-click directive in AngularJS.

HTML Markup

The following HTML Markup consists of:
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.
Button – For capturing user input.
The HTML INPUT Button has been assigned with the following AngularJS directive.
ng-click – Called when user clicks the Button.
SPAN – For displaying message.
The HTML SPAN has been assigned with the following AngularJS directive.
ng-bind – This directive tells AngularJS to replace the content of an HTML element with the value of a given variable, or expression.
<div ng-app="MyApp" ng-controller="MyController">
    <input type="button" value="Click Me!" ng-click="ButtonClick()" />
    <br /><br />
    <span ng-bind="Message"></span>

Implementing ng-click Directive

Inside the HTML Markup, the following AngularJS script file is inherited:
1. angular.min.js
When the Button is clicked, the ButtonClick function of the Controller gets called.
Inside this function, the Message variable is set, which will be later displayed on the page using SPAN element.
<script type="text/javascript" src=""></script>
<script type="text/javascript">
    var app = angular.module('MyApp', [])
    app.controller('MyController', function ($scope) {
        $scope.ButtonClick = function () {
            $scope.Message = "Button clicked."


ng-click example in AngularJS