JSFiddle - React, Tailwind, and code Playground

by Alien_time

HTML

<div ng-app="app">
    <div ng-controller="ParentController">
        
        <span directive-with-model ng-model="checkbox.text">
        
    </div>
    
</div>

JavaScript

var app = angular.module('app', []);

app.controller('ParentController', function($scope) {
    
    $scope.checkbox = '';
    
});

app.directive('directiveWithModel', function($compile) {
    
    return {
        restrict: 'A',
        replace: true,
        scope: {
            ngModel: '=',
        }
        
        link: function(scope, element, attrs, ngModel) {
        
             scope.ngModel = '';
        
            var html = '<input type="text" ng-model="ngModel" />';
        
            $compile(html)(scope, function(_element,_scope) {
						element.replaceWith(_element);					
				});
        
        }
    }
    
});