Apply currency filter to the input field in angularjs

Unfortunately you can not format using ng-model. At least not that way. You will need to create your own directive that implements a parser and formatter. Here is a similar question.

There is a pretty good directive our there that does that currently: ngmodel-format


I created a simple directive that handles formatting input fields. Here is a jsfiddle example. To use it add this to your existing code.

<div ng-repeate="item in items">
    <input type="text"  ng-model="item.cost" format="currency" />
</div>

And add this directive to your code.

// allow you to format a text input field.
// <input type="text" ng-model="test" format="number" />
// <input type="text" ng-model="test" format="currency" />
.directive('format', ['$filter', function ($filter) {
    return {
        require: '?ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;

            ctrl.$formatters.unshift(function (a) {
                return $filter(attrs.format)(ctrl.$modelValue)
            });

            elem.bind('blur', function(event) {
                var plainNumber = elem.val().replace(/[^\d|\-+|\.+]/g, '');
                elem.val($filter(attrs.format)(plainNumber));
            });
        }
    };
}]);