NgAttr value initially empty when containing mustache directive in AngularDart - attributes

Question

Chapter 3 of the AngularDart tutorial defines a rating #NgComponent (see excerpt below), that is used in index.html like this:
<rating max-rating="5" rating="ctrl.selectedRecipe.rating"></rating>
In that chapter it is also suggested that that the max-rating #NgAttr can be set via a {{...}} like this:
<rating max-rating="{{ctrl.max}}" rating="ctrl.selectedRecipe.rating"></rating>
In the RecipeController I have simply declared:
int max = 5;
If I add print("maxRating('$value')") at the top of the component's maxRating() setter body (see below), then in running the app I get the following output:
maxRating('') // printed 7 times
maxRating('5') // printed 7 times
Questions: Why is the value initially empty? I assume that it is because the interpolation has not been done yet, but then why is the setter called at all before the value is "ready"?
Excerpt of RatingComponent class definition:
#NgComponent(
selector: 'rating', ...
publishAs: 'cmp'
)
class RatingComponent {
...
#NgTwoWay('rating')
int rating;
#NgAttr('max-rating')
set maxRating(String value) {
var count = value == null ? 5 : int.parse(value);
stars = new List.generate(count, (i) => i+1);
}

Answer 1

As far as I know, angular dart is very eager in applying values. As soon as angular is running it starts applying values, I guess to provide a feel of responsiveness.
I've been bitten by this too and had to write more than one workaround for not yet initialized values.
The setter and getters are called by the binding mechanism to stabilize the values, as some values may depend on each other and the mechanism "brute forces" this by just setting and getting values multiple times (7 by default, IIRC).