JSFiddle - React, Tailwind, and code Playground

by MrRampage

HTML

<div ng-app ng-controller="ctrl">
    <pre>
        {{ info | json }}
    </pre>
    <button ng-click="change()">
        Change!
    </button>
    <button ng-click="addProp()">
        Affect info!
    </button>
</div>

JavaScript

function ctrl($scope) {
    $scope.info = {
        prop: {}
    };
    
    $scope.change = function() {
        $scope.info.prop["dog" + Math.random()] = Math.random();
    }
    
    $scope.addProp = function() {
        $scope.info["cat" + Math.random()] = Math.random();
    }
    
    $scope.$watchCollection('info.prop', function(value) {
        if (value) {
            console.log("info.prop has changed!");
        }
    });
    
    $scope.$watchCollection('info', function(value) {
        if (value.prop) {
            console.log("info has changed!");
        }
    });
    
    $scope.$watch('info', function(value) {
        if (value) {
            console.log("deep watch triggered");   
        }
    }, true);
};