Angular: Scope Issues

http://angularjs.org/ http://stackoverflow.com/questions/22766175/angularjs-nested-scopes-and-altering-parent-scope-variables/22766741#22766741

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="ParentCtrl">
  Hello, {{json}}!
    <div ng-controller="ChildCtrl">
          Hello, {{json}}!
    </div>
</div>


    <div ng-controller="ParentCtrl">
      Broken , {{json2}}!
        <div ng-controller="ChildCtrl">
              Broken, {{json2}}!
        </div>
    </div>

JavaScript

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function ParentCtrl($scope) {
    $scope.json2 = {
         child:{
            name: 'parent'
        }
    }
    $scope.json = {
        child:{
            name: 'parent'
        }
    };
}

function ChildCtrl($scope, $timeout) {
    $scope.json.child.name= 'BOB';
    $scope.json2 = {
         child:{
            name: 'child'
        }
    }
    
    $timeout(function(){
         $scope.json2.child.name= 'nick';
     },5000);
}