JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="example">
    <form name="form">
        <input ng-model="model.instanceName" name="instanceName" test />
        <button ng-click="model.instanceName = 'foo'">Click to foo</button>
        <div>{{ form.instanceName.$valid }}</div>
    </form>
</div>

JavaScript

angular.module('example', [])
    .directive('test', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function ($scope, element, attrs, ctrl) {

            ctrl.$setValidity('namePattern', true);

            function checkValid(name) {
                console.log('checkValid executed');
                if (!name || ctrl.$pristine) {
                    ctrl.$setValidity('namePattern', true);
                    return name;
                }
                var test = /^[A-Za-z0-9_-]+$/;
                ctrl.$setValidity('namePattern', test.test(name));
                return name;
            }

            // called when value changes via code/controller
            ctrl.$formatters.unshift(checkValid);
            // called when value changes in input element
            ctrl.$parsers.unshift(checkValid);
        }
    };
});