JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="app">
<div ng-controller="MyController">
<form name="someForm">
<div this-directive thisval="theModel"></div>
<div>theModel='{{ theModel }}'</div>
</form>
</div>
</div>
JavaScript
var app = angular.module('app', []);
app.controller('MyController', function($scope, $rootScope, $log) {
$scope.$watch('theModel', function(newVal, oldVal) {
$log.info('in *MyController* model value changed', newVal, oldVal);
});
});
app.directive('thisDirective', function($compile, $timeout, $log) {
return {
scope: {
thisval: '='
},
link: function(scope, element, attrs) {
var htmlText = '<input type="text" ng-model="thisval" />' +
'<div child-directive childval="thisval"></div>';
$compile(htmlText)(scope, function(_element, _scope) {
element.replaceWith(_element);
});
scope.$watch('thisval', function(newVal, oldVal) {
$log.info('in *thisDirective* thisval changed...',
newVal, oldVal);
});
}, // end link
} // end return
});
app.directive('childDirective', function($compile, $timeout, $log) {
return {
scope: {
childval: '='
},
link: function(scope, element, attrs) {
var htmlText = '<input type="text" ng-model="childval" />';
$compile(htmlText)(scope, function(_element, _scope) {
element.replaceWith(_element);
});
scope.$watch('childval', function(newVal, oldVal) {
$log.info('in *childDirective* childval changed...',
newVal, oldVal);
});
// make believe change that gets called outside of angular
setTimeout(function() {
// need to wrap the setting of values in the scope
// inside of an $apply so that a digest cycle will be
// started and have all of the watches on the value called
scope.$apply(function() {
scope.childval = "set outside of angular...";
});
}, 5000);
},
} // end return
});