Angular Updates Model but no Two Way Binding w/ Custom Filter

Question

I recently wrote a simple custom filter which only displays items in my model given a specific model property and it works great. It is below..

Filter

app.filter('status', function() {
    return function(input, theStatus) {
        var out = [];

        for (var i = 0; i < input.length; i++) {
            var widget = input[i];
            if (widget.status === theStatus)
                out.push(widget);
        }

        return out;
    };
});

The filter is applied as such on an ng-repeat.

<tr ng-repeat="widget in pendingWidgets = (widgetList | status: 0)">
    <td><a href="" ng-click="updateStatus(widget.widgetId, 1)"><span class="glyphicon glyphicon-usd" /></a></td>
    <td><a href="" ng-click="updateStatus(widget.widgetId, 2)"><span class="glyphicon glyphicon-usd" /></a></td>
    <td><a href="" ng-click="updateStatus(widget.widgetId, 3)"><span class="glyphicon glyphicon-usd" /></a></td>
    <td><a href="" ng-click="updateStatus(widget.widgetId, 4)"><span class="glyphicon glyphicon-usd" /></a></td>
</tr>

And on a panel heading as so

<div class="panel-heading"><span class="badge">{{pendingWidgets.length}}</span></div>

When the glyph is clicked ng-click runs updateStatus() as below...

$scope.updateStatus = function(theId, newStatus) {
    widgets.setStatus(tagNumber, newStatus);
    $scope.displayAlert = true;
};

And the widget.setStatus() is as such..

app.factory('widgets', ['$http', function($http) {
    var o = {
        widgets:[]
    };

    o.setStatus = function(aWidget, theStatus) {
        return $http.put('/widgets/' + aWidget, { 'status': theStatus }).success(function (data) {
            // do I need to put something here?
        });
    };

    return o;
}]);

My question lies in

How can I get my page to refresh on the ng-click action when the updateStatus() call is made on my model? When the glyph is clicked the model is updated but the page is not. Only on a page refresh or when I visit a different page and then come back does the page display the updated model accurately with respect to the custom filter.

Answer 1

It doesn't look like you're updating the status for a particular widget (on the client side). You're telling your server about the update, but on the client side, no update happens.

That's why when you refresh (i imagine you're loading the widgets from the db / backend) you see the update.

Where you have: // do I need to put something here? you need to do something like:

aWidget.status = data.status; // where data is the updated widget object

(this assumes that your backend is returning the updated widget - which if you're following the same conventions that I'm used to - it should be).