JSFiddle - React, Tailwind, and code Playground

by tetotechy

HTML

<body ng-app='tests'>

    <div ng-init='outerFoo="outerFoo"' ng-controller='outerCtrl'>
        <div ng-init='innerFoo="innerFoo"' ng-controller='innerCtrl'>
        </div>
    </div>

</body>

JavaScript

(function (ng) {

	var app = ng.module('tests', [])
		
		.controller('innerCtrl', ['$scope', function ($scope) {

			//$scope props
            console.log('\nInner ctrl -> Inner $scope own props (no trace of the innerFoo prop):');
			ng.forEach($scope, function(value, key){
				console.log(key);
			});

			//Inner foo
			console.log('\nInner ctrl -> internal foo prop:');
			console.log($scope.innerFoo, '(synchronous)');
			setTimeout(logInner, 0, 'from inner ctrl (timeout)');
			$scope.type = 'from inner ctrl ($eval)';
			$scope.$evalAsync(logInner);

			//Outer foo
			console.log('\nInner ctrl -> inherited foo prop:');
			console.log($scope.outerFoo, '(synchronous)\n');

			function logInner (type) {
				console.log($scope.innerFoo, (typeof type === 'string' ? type : $scope.type));
			}

		}])

		.controller('outerCtrl', ['$scope', function ($scope) {

			//$scope props
			console.log('\nOuter ctrl -> Outer $scope own props (no trace of the outerFoo prop):');
			ng.forEach($scope, function(value, key){
				console.log(key);
			});

			//Inner foo
			console.log('\nOuter ctrl -> internal foo prop:');
			console.log($scope.outerFoo, '(synchronous)');
			setTimeout(logOuter, 0, 'from outer ctrl (timeout)');
			$scope.type = 'from outer ctrl ($eval)';
			$scope.$evalAsync(logOuter);

			function logOuter (type) {
				console.log($scope.outerFoo, (typeof type === 'string' ? type : $scope.type));
			}

		}]);

}) (angular);