In this article I will explain with an example, how to fire click event for a Button using ng-click directive in AngularJS.
The AngularJS ng-click directive is used to assign click events to HTML elements like Button.
 
Implement Button click event using ng-click directive in 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 Button assigned with ng-click AngularJS directive and an HTML SPAN specified with ng-bind AngularJS directive.
Note: If you want to learn more about these directives please refer my article Introduction to AngularJS.
When the Button is clicked, the ButtonClick event handler (defined within the Controller) is called. Inside the ButtonClick event handler, the Message variable is set and its value is displayed in the HTML SPAN.
<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.ButtonClick = function () {
            $scope.Message = "Button clicked."
        }
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <input type="button" value="Click Me!" ng-click="ButtonClick()" />
    <br />
    <br />
    <span ng-bind="Message"></span>
</div>
 
 
Screenshot
AngularJS: Implement Button click event using ng-click directive example
 
 
Demo
View Demo
 
 
Downloads

Download Code