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.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" />',
        require: 'ngModel',
        
        link: function(scope, element, attrs, ngModel) {
            
        },
            
    } // end return
});