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>
            <div>theModel='{{ theModel }}'</div>
        </form>
    
     </div>
</div>

JavaScript

var app = angular.module('app', []);
app.controller('MyController', function($scope,$rootScope,$log) {
    
    $scope.theModel = '';
    
    $scope.$watch('theModel',function(newVal,oldVal){
        $log.info('in *MyController* model value changed',newVal,oldVal);
    });
});

app.controller('ChildController', function($scope) {
    
    $scope.dnInsertId = 0;
               
               $scope.serverResponse = function() {
                    $scope.dnInsertId = 545;
    
                   };
    
});
app.directive('thisDirective', function($compile, $timeout, $log) {
 
    return {
        scope: {
            ngModel: '='
        },
        require: 'ngModel',
        template: '<input type="text" ng-model="ngModel" /><div child-directive ng-model="ngModel"></div>',
        
        link: function(scope, element, attrs, ngModel) {
            
        }, // end link
    } // end return
    
});

app.directive('childDirective', function($compile, $timeout, $log) {
    return {
      	scope: {
            ngModel: '='
		},
        template: '<input type="text" ng-model="ngModel" /><button type="button" ng-click="serverResponse()">Fake Server Response</button>',
        require: 'ngModel',
        controller: 'ChildController',
        
        link: function(scope, element, attrs, ngModel) {
            
            scope.ngModel = scope.dnInsertId;
            
            scope.$watch('dnInsertId', function(newval, oldval) {
                
                scope.ngModel = scope.dnInsertId;
                
            }, true);

        },

        

            
    } // end return
});