JSFiddle - React, Tailwind, and code Playground

by Alien_time

HTML

<div ng-app="app">
    <div ng-controller="MyController">
    
        <form name="someForm">
            <div this-directive ng-model="theModel"></div>
        </form>
    
     </div>
</div>

JavaScript

var app = angular.module('app', []);
app.controller('MyController', function() {
    
});

app.directive('thisDirective', function($compile, $timeout) {
 
    return {
        scope: false,
        
        link: function(scope, element, attrs) {
            var ngModel = attrs.ngModel;
            var htmlText = '<input type="text" ng-model="'+ ngModel + '" />' +
                           '<div child-directive ng-model="'+ ngModel + '"></div>';
            
            $compile(htmlText)(scope, function(_element, _scope) {
                element.replaceWith(_element);                
            });
            
            // Not sure how to watch changes in childDirective's ngModel ???????
            
        }, // end link
    } // end return
    
});

app.directive('childDirective', function($compile, $timeout) {
    return {
      		scope: {
			    ngModel: '='			
		},  
        
        link: function(scope, element, attrs, ngModel) {
            var htmlText = '<input type="text" ng-model="ngModel" />';
            
            $compile(htmlText)(scope, function(_element, _scope) {
                element.replaceWith(_element);                
            });   
            
            // Here the directive text field updates after some server side process
            scope.ngModel = scope.dbInsertId;
			  
			scope.$watch('dbInsertId', function(newValue, oldValue) {
				if (newValue)
					console.log("I see a data change!");  // Delete this later
					scope.ngModel = scope.imageId;
			}, true);
				
        },
            
    } // end return
});