Function is not called because of ng-repeat filter - angularjs

Question

I have code like this:
<div class="row"
ng-repeat="x in orders|orderBy:'order_id'| filter:{ paid: '0' } ">
<div class="col left">
<INPUT TYPE="CHECKBOX" NAME="processed" id="processed"
ng-true-value="'1'"
ng-false-value="'0'"
ng-model="x.processed"
ng-click="changeProcessedStatus(x.id, x.processed)">上菜/未上菜
<P>
</div>
<div class="col left">
<INPUT TYPE=CHECKBOX NAME="paid" id="paid"
ng-true-value="'1'"
ng-false-value="'0'"
ng-model="x.paid"
ng-click="changePaidStatus(x.id, x.paid)">付款/未付款
<P>
</div>
</div>
When I click checkbox "processed", it works fine (changeProcessedStatus function is called). But when I click checkbox "paid", since the record is defined to be filtered, changePaidStatus function is not called.(I don't know why) when I remove ng-repeat filter, changePaidStatus function is called normally.
How can I solve this problem? Thanks.

Answer 1

The order of execution of ng-click and ng-model is ambiguous. Instead you should use ng-change to ensure that you obtain the correct values of the model variable:
<div class="row"
ng-repeat="x in orders|orderBy:'order_id'| filter:{ paid: '0' } ">
<div class="col left">
<INPUT TYPE="CHECKBOX" NAME="processed" id="processed"
ng-true-value="'1'"
ng-false-value="'0'"
ng-model="x.processed"
ng-change="changeProcessedStatus(x.id, x.processed)">上菜/未上菜
<P>
</div>
<div class="col left">
<INPUT TYPE=CHECKBOX NAME="paid" id="paid"
ng-true-value="'1'"
ng-false-value="'0'"
ng-model="x.paid"
ng-change="changePaidStatus(x.id, x.paid)">付款/未付款
<P>
</div>
</div>