Formatting Issue

Example used for a question on stackoverflow

HTML

<div data-ng-app="app" data-ng-controller="Ctrl">
    <input type="text" data-currency="" data-ng-model="data" />
    <div>Model: {{data}}</div>
    <button ng-click="chgModel()">Change Model</button>
</div>

JavaScript

var app = angular.module("app", []);

function Ctrl($scope) {
    $scope.data = 1234567;
    $scope.chgModel = function() {
        $scope.data = 97531;
    };
}
    
app.directive('currency', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attr, ctrl) {
           
            ctrl.$formatters.push(format);

            ctrl.$parsers.push(function(viewValue) {
                return parseFloat(viewValue.replace(new RegExp(",", "g"), ''));
            });
            
            element.bind("change", function() {
                if( ctrl.$invalid ) return;
                var formattedModel = format(ctrl.$modelValue);
                if( formattedModel !== ctrl.$viewValue ) {
                    element.val(formattedModel);
                }
            });
            
            function format(modelValue) {
                return modelValue.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
            }
        }
    };
});