How to determine why a function is called twice in a controller?

Question

Angular

I have a controller:

<div ng-controller="Main">
<widget autoupdate="true" exec="myconsole"/>
<widget />
<widget />
<widget />
<widget />
<widge/>

</div>

function Main($scope){
$scope.myconsole = function(val) {
console.log(val);
}


}

Create a widget component

const widgetsComponent = {

   bindings: {
  
     'autoupdate': '@',
     'exec': '=', 
    },

    template: require('./view/blocks/widgets.html'),
};

Widget Code

<div>
 {{ $ctrl.autoupdate ? $ctrl.exec(1) : 0  }}

..
</div>

As a result:

I mean, if you write exec for components 2 times, then it will be executed even more, why?

<div ng-controller="Main">
<widget autoupdate="true" exec="myconsole"/>
<widget />
<widget />
<widget />
<widget autoupdate="true" exec="myconsole"/>

</div>

Answer 1

Because {{ $ctrl.autoupdate ? $ctrl.exec(1) : 0 }} will be executed on each sneeze of the $digest loop.

Answer 2

<widget autoupdate="true" exec="myconsole"/>
...
<widget autoupdate="true" exec="myconsole"/>