JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.0.2/i18n/angular-locale_de-de.js"></script>
<div ng-app="demo" ng-init="" ng-controller="Demo">
    
    <p style="text-align: center">German number format</p>
    
    <div>
        <button ng-click="changeValue()">Add 7 to value</button>
    </div>
   
    Localized input: <input type="text" ng-model="untaintedNumber" numeric decimal-places="decPlaces" ng-change="showInLog()"></input>
    

    <p>
    <code>

        
        Localized Display: <br/>{{ untaintedNumber | number:4 }}
        <br/>
        
        Localized Display, and to prove it is still in number type: <br/>{{ untaintedNumber + 1 | number:4 }}
        <br/>
        
        <hr/>
        
        Program format: <br/>{{ untaintedNumber }}        
        <br/>
        
        Program format, and to prove it is still in number type: <br/>{{ untaintedNumber + 1}}
        <br/>
    </code>
    </p>
    
</div>

CSS

input { display: block; text-align: right; width: 150px }

JavaScript

function Demo($scope) {

    $scope.decPlaces = 2;
    
    $scope.untaintedNumber = 1234567.8912;
    
    $scope.changeValue = function() {
        
        // The model didn't change to string type, hence we can do business as usual with numbers.
        // The proof that it doesn't even change to string type is we don't even need 
        // to use parseFloat on the untaintedNumber when adding a 7 on it. 
        // Otherwise if the model's type mutated to string type, 
        // the plus operator will be interpreted as concatenation operator: http://jsfiddle.net/vuYZp/
        // Luckily we are using AngularJS :-)        
        $scope.untaintedNumber = $scope.untaintedNumber + 7;
        
        // contrast that with jQuery where everything are string:
        // you need to call both $('elem').val() and Globalize's parseFloat, 
        // then to set the value back, you need to call Globalize's format.
        
        /*              
        var floatValue = Globalize.parseFloat($('#uxInput').val());
        floatValue = floatValue * 2;        
        var strValue = Globalize.format(floatValue, "n4");
        $('#uxInput').val(strValue);
        */
        
    };
    
    $scope.showInLog = function() {
        console.log($scope.untaintedNumber);     
    };
    
}

String.prototype.replaceAll = function(stringToFind,stringToReplace){
    if (stringToFind === stringToReplace) return this;
    
    var temp = this;
    var index = temp.indexOf(stringToFind);
        while(index != -1){
            temp = temp.replace(stringToFind,stringToReplace);
            index = temp.indexOf(stringToFind);
        }
        return temp;
};

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

module.directive('numeric', function($filter, $locale) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {
            
            var decN = scope.$eval(attr.decimalPlaces); // this is the decimal-places...