Angular JS, Typescript - UI doesn't show model changes when using $watch

Question

I've been running into a problem with Angulars $watch and I'm not sure why the UI doesn't show my changes, specifically my updated model.

So I have 3 numeric text boxes (I'm using kendo, but I think it doesn't matter). I enter a number in Box A, I enter a number in Box C. So Box B is calculated., if it isn't an integer number, it gets rounded and set (all in the $watch of Box C). This works so far.

Sometimes I have to recalculate Box C after Box B has been calculated. (So this are all integers, and the number for Box A times the Box B should exactly be the numeric Content in Box C.

So therefore Box C gets calculated again. So my Debug Console says: Box A changed to 72. Box C changed to 20000. Box B Changed to 3333. Box C Changed to 19998. But the last change for Box C doesn't show up in the UI.

So if Box C gets changed in the UI, the watch changes B. Then the watch of B should change C again, but it doesn't work. I tried already wrapping stuff into a safeApply method, but still no sync back in UI.

Is this a scope issue? What is causing this?

Would appreciate any comment! Thanks!

Answer 1

Thanks, so if anyone runs into similiar problem....

it seems as the problem lies within kendo k-ng-model binding. When using ng-model with blur option everything works as expected. So i used....

ng-model="dc.durationState.kilometersTo" 
ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }" 

instead of

k-ng-model="dc.durationState.kilometersTo"

on the input field...