angular.js scope inheritance using controllers 01

by outsider

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-controller="MainCtrl">
    {{greet}}!! {{whoami}}
    <div ng-controller="NavCtrl">
        {{greet}}!! {{whoami}}
    </div>
    <div ng-controller="SideCtrl">
        {{greet}}!! {{whoami}}
    </div>
</div>

JavaScript

function MainCtrl($scope) {
    $scope.whoami= "Main Controller";
    $scope.greet = "Hello";
}

function NavCtrl($scope) {
    $scope.whoami= "Nav Controller";
}

function SideCtrl($scope) {
    $scope.whoami= "Side Controller";
}