Angularjs: update filter after user input

Question

I am having an issue updating a value after user input using angularjs. I am giving the user a grid to enter numbers into, and after each keypress, I would like to sum that column and display it in the column header. The filter works for the initial value of table, but wont update when new number are input into the table. Is there a way to refresh the element?

<th>total<small>{{Rows|sumByKey:'ColOne'}}</small></th> ....

<tr ng-repeat="Row in Rows">
    <td><input type="text" value="{{Row.ColOne}}"/></td>
</tr>

Angularjs Filter:

app.filter('sumByKey', function () {
return function (data, key) {
    if (typeof (data) === 'undefined' || typeof (key) === 'undefined') {
        return 0;
    }

    var sum = 0;
    for (var i = data.length - 1; i >= 0; i--) {
        sum += parseInt(data[i][key]);
    }
    //filter.$stateful = true;
    return sum;
    };
});

Answer 1

I belive you need to bind you value to make angular aware of the changes. Use ng-model on the inputs to set the value. This way Angular is in control of all values.

<th>total<small>{{Rows|sumByKey:'ColOne'}}</small></th> ....

<tr ng-repeat="Row in Rows">
    <td><input type="text" ng-model="Row.ColOne"/></td>
</tr>

Here is a plunker for it running .