JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="demo" ng-init="" ng-controller="Demo">
    
    <div>
        <button ng-click="loadData1()">Load Data -- all caps</button>
        <button ng-click="loadData2()">Load Data -- all lowercase</button>
    </div>
   
    <input type="number" lowercase ng-model="data.var1"></input>
    
    <input type="number" lowercase ng-model="data.var2"></input>
    
    <p>
    <code>
        {{ data }}
    </code>
    </p>
    
</div>

CSS

input { display: block; }

JavaScript

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

module.directive('lowercase', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {

            function fromUser(text) {
                return 0+text;
            }

            function toUser(text) {
                return 5;
            }
            ngModel.$parsers.push(fromUser);
            ngModel.$formatters.push(toUser);
        }
    };
});

function Demo($scope) {

    $scope.data = {
        var1: 0,
        var2: 0
    };
    
    $scope.loadData1 = function() {
        $scope.data = {
            var1: 'ABCDEF',
            var2: 'GHJ ILK12345'
        };
    };
    
    $scope.loadData2 = function() {
        $scope.data = {
            var1: 'hdsdfjh',
            var2: 'please talk quietly in the library'
        };
    };
 
}