In angularjs why does ng-click on an element also fire other method calls in the element's attributes?

Question

In angularjs why does ng-click on an element also fire other method calls in the element's attributes?

I'm learning angularJS, and am trying to understand why multiple methods are invoked when only one is actually called. Within this line:

<li  ng-repeat="i in names" style="position: relative; top:{{mar(i)}}px; z-index:{{i}}; background-color: orange;" ng-click="clicker(i, $index)">{{i + " " + $index}}</li>

So I have two "calls" in this line:

Within the style attribute - this calculates the top offset.
ng-click= my function to do stuff when the element is clicked.

When I click the element - the mar(i) is called ALONG WITH the ng-click function.

I am just trying to understand why this occurs. I have a plunk here that you can try out.

javascript
angularjs

Answer 1

This is because you're binding to a method where you're saying {{mar(i)}} .. this means that every time there's a $digest, such as after an ng-click is triggered, that method will have to be evaluated so the view can be updated.