AngularJS Example:

by c0bra

HTML

<div ng-app>
  <div ng-controller="CtrlA">
      Parent {{foo}}
       <div ng-controller="CtrlB">
          <div ng-controller="CtrlC">
              <div ng-controller="CtrlD">
Child foor: {{foo}} {{bar}} {{foobar}}
                  
                  <button type="button" class="btn" ng-click="foo = 'fooD'">Click</button>
              </div>
          </div>
      </div>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<style>

JavaScript

function CtrlA($scope) {
    $scope.foo = 'fooA';
}

function CtrlB($scope) {

}

function CtrlC($scope) {
    $scope.bar = 'barC';
    console.log($scope.foo);
}

function CtrlD($scope) {
    $scope.foobar = 'foobarD';
    console.log($scope.foo,$scope.bar);
}