JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app='myApp' ng-controller="OneController">
<div ng-controller="TwoController">
<div ng-controller="ThreeController">
<div ng-controller="FourController"></div>
</div>
</div>
</div>
JavaScript
angular.module('myApp', [])
.controller('OneController', ['$scope', function ($scope) {
$scope.hello = "Hello!";
}])
.controller('TwoController', ['$scope', function ($scope) {}])
.controller('ThreeController', ['$scope', function ($scope) {}])
.controller('FourController', ['$scope', function ($scope) {
function topScope() {
var scope = $scope;
while (scope && scope.$parent !== $scope.$root) {
scope = scope.$parent;
}
return scope;
}
var s = topScope();
console.log(s.hello);
}]);