How to display ng-model input value as currency in angular?

Question

I'm having in html

<input type="text" ng-model="price" >

<h2>{{ price | currency}}</h2>

In controller

$scope.price = 10;   
Which displays   **$10** in h1 if i change the value in price model input.

I want the text box input to be in currency ($10 in input box as value). How to achieve this?

Answer 1

You can try using formatters and parsers like

app.directive('currency', function () {
    return {
        require: 'ngModel',
        link: function(elem, $scope, attrs, ngModel){
            ngModel.$formatters.push(function(val){
                return '$' + val
            });
            ngModel.$parsers.push(function(val){
                return val.replace(/^\$/, '')
            });
        }
    }
})

then

<input type="text" ng-model="price" currency>

Demo: Fiddle