Get time difference without $watches

Question

I have a fixed table with a fixed number of rows. Lots of rows of timepicker input boxes and it would be great if I could update the total input's model by calculating the difference every time one of the inputs are changed, into a format HH:SS. The timepicker writes date objects to the model.

How could I possibly do this?

<tr>
    <th scope="row">Sun</th>
    <td><input class="shift-hours" type="text" ng-model="sform.shift_defaults.day.sun.total" /></td>
    <td><input class="shift-timepicker" ui-timepicker ng-model="sform.shift_defaults.day.sun.on" /></td>
    <td><input class="shift-timepicker" ui-timepicker ng-model="sform.shift_defaults.day.sun.off" /></td>
</tr>
<tr>
    <th scope="row">Mon</th>
    <td><input class="shift-hours" type="text" ng-model="sform.shift_defaults.day.mon.total"/></td>
    <td><input class="shift-timepicker" ui-timepicker ng-model="sform.shift_defaults.day.mon.on"/></td>
    <td><input class="shift-timepicker" ui-timepicker ng-model="sform.shift_defaults.day.mon.off"/></td>
</tr>

Answer 1

you could write smth like

<span ng-bind="calculate(model1, model2, model3)"/>

and define calculation for multiple models in calculate function.