JSFiddle - React, Tailwind, and code Playground

by hoolymama

HTML

<div ng-controller="ParentCtrl">
    <button ng-click="toggleValue()">Toggle</button>{{parentVal.name | uppercase }}

    <div ng-controller="ChildCtrl1">
        ChildCtrl1: {{childVal}} 
        <span>(watches parentVal.name, deep=false)</span>
    </div>
    
    <div ng-controller="ChildCtrl2">
        ChildCtrl2: {{childVal}} 
        <span>(watches parentVal, deep=true)</span>
    </div>
    
    <div ng-controller="ChildCtrl3">
        ChildCtrl3: {{childVal}} 
        <span>(watches parentVal, deep=false)</span>
    </div>
    
</div>

CSS

div {
    padding:5px;
    margin:5px;
    border :1px solid blue;
}
span {
    color:gray;
}

JavaScript

angular.module('myApp', [])
    .controller('ParentCtrl', function ($scope) {

    $scope.parentVal = {
        name: "hello"
    };

    $scope.toggleValue = function () {
        $scope.parentVal.name = ($scope.parentVal.name === "hello") ? "goodbye" : "hello";
    }
    
}).controller('ChildCtrl1', function ($scope) {

    $scope.$parent.$watch(
        "parentVal.name",
        function (newValue) {
            $scope.childVal = newValue;
            console.log(newValue);
        },false
    );

}).controller('ChildCtrl2', function ($scope) {

    $scope.$parent.$watch(
        "parentVal",
        function (newValue) {
            $scope.childVal = newValue.name;
            console.log(newValue);
        }, true
    );

}).controller('ChildCtrl3', function ($scope) {

    $scope.$parent.$watch(
        "parentVal",
        function (newValue) {
            $scope.childVal = newValue.name;
            console.log(newValue);
        },false
    );

});