AngularJS Live Example

by johnlindquist

HTML

<div ng:app>
 <div ng-controller="MainCntl">
    <div ng-controller="SubCntl1">
        <button ng-click="subClick()">Sub 1</button>
            {{mainValue}}
     </div>
     <div ng-controller="SubCntl2">
         <button ng-click="mainClick()">Sub 2</button>
         {{mainValue}}
     </div>
 </div>
</div>

CSS

</style>
<script src="http://docs-next.angularjs.org/angular-1.0.0rc2.min.js"></script>

JavaScript

function MainCntl($scope) {
    $scope.mainClick = function(){
        $scope.mainValue = Math.random();
    }
}

function SubCntl1($scope) {
    $scope.subClick = function(){
        //Why is this overriding the parent scope?
        $scope.mainValue = Math.random();
    }
}

function SubCntl2($scope) {
    
}