Why do we need ng-click?

Angular apps use the ng-click() attribute rather than the the onclick event.

Why is this?

Angular doesn't change the meaning of the onclick attribute; it adds the parallel ng-click attribute to take an Angular expression. onclick takes plain old JavaScript code even when you're using Angular.

Practically speaking, suppose what you're doing in a click handler is changing some variables in an Angular scope, or calling a function in an Angular scope that changes some variables. To do that from JavaScript code (like what you would put in onclick) requires a bunch of steps

• get a reference to the scope
• assign the variable or call the function
• call scope.$apply so that anything watching for updates to the variables that you changed gets notified

This looks like:

<a onclick="var $scope = angular.element(event.target).scope(); $scope.yourVar = 42; $scope.$apply()">Go</a>

and with ng-click and an Angular expression for the assignment, almost all of that is implicit:

<a ng-click="yourVar = 42">Go</a>

ng-click holds an angular expression. Angular expressions are evaluated in the context of an Angular scope, which is bound to the element having the ng-click attribute or an ancestor of that element.

The Angular expression language doesn't include flow control statements and can't declare variables or define functions. These limitations mean templates can only access variables and run functions made available by a controller or directive.