JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="lame-problem" ng-controller="LameController">
    <form name="lameForm">
        <label>Lame Input</label>
        <input lame-directive type="text" ng-model="lame.input" />
    </form>
</div>

JavaScript

angular.module('lame-problem', [])
    .controller('LameController', function($scope) {
        $scope.lame = {
            input: ''
        };
    })

    .directive('lameDirective', function($parse, $filter) {
        
        return {
            require: 'ngModel',
            link: function(scope, element, attrs, ngModel) {
                ngModel.$formatters.push(
                    function (value) {
                        console.log('this only gets called on page load');
                    }
                );
                
                ngModel.$parsers.unshift(
                    function (value) {
                        console.log('this gets called on each input');
                        console.log('why does the $formatters function not??');
                    }
                )
            }
        }
        
    });