Events

Like HTML, AngularJS has its own set of event listeners that can be added to HTML elements by using one or more of event directives:

• ng-blur
• ng-change
• ng-click
• ng-copy
• ng-cut
• ng-dblclick
• ng-focus
• ng-keydown
• ng-keypress
• ng-keyup
• ng-mousedown
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-mouseover
• ng-mouseup
• ng-paste

NOTE: An AngularJS event will not overwrite an HTML event, both events will be executed.

Mouse Events

Mouse events occur when the cursor moves over an element, in this order:

• ng-mouseenter
• ng-mouseover
• ng-mousemove
• ng-mouseleave

Or, when a mouse button is clicked on an element, in this order:

• ng-mousedown
• ng-mouseup
• ng-click

NOTE: Mouse events can be added to any HTML element.

In the example below the ng-click directive is used to increment a counter:

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.count = 0;
});
</script> 

<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click ="count = count + 1">Click To Increment!</button>
  <h2>{{count}}</h2>
</div>

Events: Button Demo

It is better to refer a function than to include the code in the tag. This is akin to using the onclick() event in HTML instead of using a function.

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.count = 0;
$scope.myFunction = function() {
$scope.count++;
}
});
</script>

<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="myFunction()">Click To Increment!</button>
  <p>{{count}}</p>
</div>

Events: Button Demo 2

A common event is to be able to show or hide content by using a “toggle” function:

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showClasses = false;
$scope.toggleFunction = function(){
$scope.showClasses = !$scope.showClasses;
}
});
</script>

<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="toggleFunction()">Show/Hide Classes!</button>
  <h1>Classes:</h1> 
  <div ng-show="showClasses">
     <p>Photoshop</p>
     <p>Illustrator</p>
     <p>Dreamweaver</p>
  </div>
</div>

Events: Toggle Button Demo

NOTE: The showClasses variable is set to false initially. The toggleFunction sets the showClasses variable to the opposite of what it currently is, by using the not operator (!). This is a common technique to create a toggle functionality (e.g., $scope.showShowClasses= !$scope.showClasses;).
You can also pass the $event object as an argument when calling the function. See w3schools for an example.