JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="mymod">
    First Name: <input type="text" ng-model="user.firstname" />
    <br /><br />
    Read-Only Directive set to false:
    <input type="text" ng-model="user.firstname" my-read-only="false" />
    <br /><br />
    Read-Only Directive set to true:
    <input type="text" ng-model="user.firstname" my-read-only="true" />
</div>

JavaScript

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

mod.directive("myReadOnly", [function () {
        return {
            restrict: "A",
            transclude: "element",
            require: "?ngModel",
            compile: function (tElem, tAttrs, transclude) {
                var template = angular.element("<span></span>");
                return function (scope, elem, attrs, ngModelCtrl) {
                    if (ngModelCtrl && scope.$eval(attrs.myReadOnly) === true) {
                        scope.$watch(function () {
                            return scope.$eval(attrs.ngModel);
                        }, function (newVal) {
                            template.html(newVal);
                        });

                        elem.after(template);
                    }
                    else {
                        elem.after(transclude(scope));
                    }
                }
            }
        }
    }]);