How to do two-way filtering in AngularJS?

It turns out that there's a very elegant solution to this, but it's not well documented.

Formatting model values for display can be handled by the | operator and an angular formatter. It turns out that the ngModel that has not only a list of formatters but also a list of parsers.

1. Use ng-model to create the two-way data binding

<input type="text" ng-model="foo.bar"></input>

2. Create a directive in your angular module that will be applied to the same element and that depends on the ngModel controller

module.directive('lowercase', function() {    return {        restrict: 'A',        require: 'ngModel',        link: function(scope, element, attr, ngModel) {            ...        }    };});

3. Within the link method, add your custom converters to the ngModel controller

function fromUser(text) {    return (text || '').toUpperCase();}function toUser(text) {    return (text || '').toLowerCase();}ngModel.$parsers.push(fromUser);ngModel.$formatters.push(toUser);

4. Add your new directive to the same element that already has the ngModel

<input type="text" lowercase ng-model="foo.bar"></input>

Here's a working example that transforms text to lowercase in the input and back to uppercase in the model

The API Documentation for the Model Controller also has a brief explanation and an overview of the other available methods.