JSFiddle - React, Tailwind, and code Playground

by Ely Liberov

HTML

<div ng-controller="MyCtrl">
    <input type="text" ng-model="name" capitalize-first>
    <input type="text" ng-model="obj.name" capitalize-first>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.directive('capitalizeFirst', function (uppercaseFilter, $parse) {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {
            var capitalize = function (inputValue) {
                if (inputValue != null) {
                    var capitalized = inputValue.charAt(0).toUpperCase() + inputValue.substring(1);
                    if (capitalized !== inputValue) {
                        modelCtrl.$setViewValue(capitalized);
                        modelCtrl.$render();
                    }
                    return capitalized;
                }
            };
            var model = $parse(attrs.ngModel);
            modelCtrl.$parsers.push(capitalize);
            capitalize(model(scope));
        }
    };
});

function MyCtrl($scope) {
    $scope.name = '';
    $scope.obj = {
        name: ''
    };
}