<!DOCTYPE html> <html> <head> <script src="angular.js"></script> <script src="script.js"></script> </head> <body ng-app="mainModule"> <div ng-controller="mainController"> <h3>1. Text input with and without a change event handler</h3> Type something<br /> <label>Input with change event: <input type="text" ng-model="editValue" ng-change="onEditChange()" /></label><br /> <label>Input without change event: <input type="text" ng-model="editValue" /></label><br /> <strong>RESULT:</strong> {{onEditChangeResult}}<br /> <br /> <h3>2. Change event on checkbox</h3> Select a checkbox<br /> <label>Check1: <input type="checkbox" ng-model="check1Selected" ng-change="onCheckBoxChange()" /></label><br /> <label>Check2: <input type="checkbox" ng-model="check2Selected" ng-change="onCheckBoxChange()" /></label><br /> <strong>RESULT:</strong> {{onCheckBoxChangeResult}}<br /> <br /> <h3>3. Change event on text input without model</h3> <label>Type something: <input type="text" ng-change="onEditNoModelChange()" /></label><br /> <strong>RESULT:</strong> {{onEditNoModelChangeResult}}<br /> </div> </body> </html>
angular.module("mainModule", []) .controller("mainController", function ($scope) { // Initialization $scope.onEditChangeResult = ""; $scope.onCheckBoxChangeResult = ""; $scope.onEditNoModelChangeResult = ""; // Event handlers $scope.onEditChange = function () { $scope.onEditChangeResult = "the value is '" + $scope.editValue + "'"; }; $scope.onCheckBoxChange = function () { $scope.onCheckBoxChangeResult = "Check1 is " + ($scope.check1Selected ? "SELECTED" : "NOT SELECTED") + ", " + "Check2 is " + ($scope.check2Selected ? "SELECTED" : "NOT SELECTED"); }; $scope.onEditNoModelChange = function () { $scope.onEditNoModelChangeResult = "CHANGED"; }; });



If we need to know when an input element state changes due to user interaction, we can use the ng-change directive.

In point 1 of the example we have two different text input elements bound to the same editValue model variable. The first input has a change handler called onEditChange, while the second one has no change handlers. If you type something in the first input you can see that the value of the model variable is changed and the change handler is fired thus updating the result string, while if you type something in the second input you see that the model variable still changes (the change is reflected in the first input), but the change handler is not fired (the result string doesn't change) because the change on the first input is not due to a user interaction, but to a model change. The change event is fired only as a consequence of a user interaction with the element to which the handler is attached and not as a consequence of a change in the model.

Point 2 simply shows that we can use the ng-change directive also with checkboxes. In general we can use it with any input element that changes the model as well.

Point 3 shows what happens if we bind a change handler to an input element without binding also a model variable. In this case, the change event handler is never fired because we need both a model variable and a change handler bound to an input element to monitor its changes.

Unlike mouse and keyboard events, here we don't have an $event variable available to retrieve additional data in the event handler.