JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<div ng-app="myApp">
    <my-directive>
        <div ng-controller="myCtrl">
            <input type="text" ng-model="myModel" />
        </div>
    </my-directive>
</div>

JavaScript

angular.module('myApp', []).directive('myDirective', function($parse) {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div ng-transclude></div>' +
            '<pre>' +
            'input model: {{getInputModel()}}' +
            '</pre>',
        link: function(scope, element) {
            var inputElement = element.find('input');
            var inputModelGetter = $parse(inputElement.attr('ng-model'));
            var inputModelSetter = inputModelGetter.assign;
            function getInputModel() {
                return inputModelGetter(inputElement.scope());
            }
            function setInputModel(value) {
                inputModelSetter(inputElement.scope(), value);
            }
            
            //setInputModel('abc');
            scope.getInputModel = getInputModel;
        }
    };
}).controller('myCtrl', function($scope) {
    $scope.myModel = '123';
});