JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="Main as main" ng-init="main.blub = 234242">
    <myone model="main.blub"></myone>
    <br/>Content: "{{main.blub}}"
</div>

JavaScript

angular.module('test', [])
    .directive('myone', function ($compile, $timeout) {
    return {
        restrict: 'E',
        template: '',
        
        link: function (scope, elem, attrs) {
            $timeout(function () {
                var html = '<input type="text" ng-model="'+attrs.model+'"/><button ng-if="'+attrs.model+'" ng-click="'+attrs.model+' = 777777">X</button>';
                
                elem.append($compile(html)(scope));
                scope[attrs.model] = "initialized";
            }, 2000);
        }
    };
})
.controller('Main', function () {
    this.outsideVal = 100;
    this.insideVal = 100;
});