AngularJS function inside curly binding triggers for each click

I have a use case where I have to bind value to column in table by triggering a call to function which returns username. The table rows is looped using ng-repeat-start and pagination is used to display records.

Code 1 :

<td class="col-sm-2 col-md-2 col-lg-2">
  {{::getLogUserName(site,key,innerKey)}}
</td>

Code 2 :

 <td class="col-sm-2 col-md-2 col-lg-2"
     ng-init="userName = getLogUserName(site,key,innerKey)">
   {{userName}}
 </td>

Code 3 :

<td class="col-sm-2 col-md-2 col-lg-2"
    ng-init="userName = ::getLogUserName(site,key,innerKey)">
  {{userName}}
</td>

Above 3 examples works fine in Page 1, but for subsequent pages the function is not triggered in most scenarios.

Code 4 :

<td class="col-sm-2 col-md-2 col-lg-2">
  {{getLogUserName(site,key,innerKey)}}
</td>

getLogUserName gets trigerred for each click event and action, which should not be the case since pagintion entries could be 100 per page and triggering of the function each time is not expected.

Is there an alternate to achieve the functionality am expecting without compromising on performance

With the following example, the function is execute at least once each digest cycle:

<td class="col-sm-2 col-md-2 col-lg-2">
  {{getLogUserName(site,key,innerKey)}}
</td>

This is as expected. Care should be taken that the function be idempotent and uses minimal computing resources. Also avoid functions that invoke asynchronous operations.

---

getLogUserName doesn't trigger any API call, just a normal function which filters username and returns it.

In that case it, it would be more efficient to use a custom filter:

<td class="col-sm-2 col-md-2 col-lg-2">
  {{ userArr | customFilter : site : key : innerKey }}
</td>

app.filter("customFilter", function() {
    return function(userArr, site, key, innerKey) {
        // filter code
        // ...
        return result;
    };
})

In templates, filters are only executed when their inputs have changed. This is more performant than executing a filter on each $digest as is the case with expressions.

For more information, see

• AngularJS Developer Guide - Creating Custom Filters