JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="app" ng-controller="TestCntrl">
<input type="text" id="exampleInput" name="input" ng-model="value" number-formatter/><br/>
<strong>value in the model:</strong> {{value}}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script type="text/javascript">
  angular.module('app', [])
      .controller('TestCntrl', function TestCntrl ($scope) {
        $scope.value = 50000;
      })
      .directive('numberFormatter', ['$filter', function ($filter) {
        var formatter = function (num) {
          num = num || 0;
          return $filter('number')(num, 2);
        };

        var unformatter = function (str) {
          return (str.replace(/[^0-9\,]/g, ''))
        };

        return {
          restrict: 'A',
          require: 'ngModel',
          link: function (scope, element, attr, ngModel) {
            ngModel.$formatters.unshift(formatter);
            ngModel.$parsers.unshift(unformatter);

            element.bind('blur', function () {
              element.val(formatter(ngModel.$modelValue))
            });

            element.bind('focus', function () {
              element.val(ngModel.$modelValue);
            });
          }
        };
      }]);
</script>
</body>