Angular hierarchy example

http://blog.picnicsoftware.com/knockout-not-all-view-models

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div class="container" ng-app ng-controller='MainController'>
    <div ng-show="showProgressBar">
        <ul>
            <li ng-repeat="item in progressBarItems">{{item}}</li>
        </ul>
    </div>
    <div id="header" ng-controller='HeaderController'>
        <h2>Header Area</h2>
        Count: <span>{{items.length}}</span>        
        <button class="btn" ng-show="!locked" ng-click="lock()">Lock</button>
        <button class="btn" ng-show="locked" ng-click="unlock()">Unlock</button>
    </div>
    <div id="list" ng-controller='ListController'>
        <h2>List Area</h2>
        <ul ng-repeat="item in items">
            <li>{{item}}</li>
        </ul>
        <div ng-show="!locked">
            <input type="text" ng-model="newTodoText"></input>
            <button class="btn" ng-click="addNew()">Add</button>
        </div>
        <div>
            <button class="btn" ng-click="showProgressBar()">Show Progress Bar</button>
        </div>
    </div>
</div>

JavaScript

function MainController($scope){
    $scope.items = ["First Item", "Second Item"];
    $scope.locked = false;
    $scope.showProgressBar = false;
    $scope.progressBarItems = [];
}


// Each controller gets its own scope created because of the ng-controller directive 
// Access the parent scope from child using $parent
// And if you are only reading the value from parent scope (eg in the view for lock / unlock buttons) you do not need to use $parent
function HeaderController($scope){
    
    // Angular much prefers expressions so while we could do this, it can be avoided.     
    //var self = this;
    //this.count = ko.computed(function(){
    //   return dataModel.items().length;
    //});
    
    //this.showUnlockButton = ko.computed(function(){
    //   return dataModel.locked();
    //})
    
    //$scope.showLockButton = ko.computed(function(){
    //    return !dataModel.locked();
    //})

    // Actually even this could go into expressions but for demonstration : 
    $scope.lock = function(){        
        $scope.$parent.locked=true;
    }
    $scope.unlock = function(){        
        $scope.$parent.locked=false;
    }
}

function ListController($scope){
    var self = this;
    
    // Child scopes can directly access members of the parent scope 
    // so the following is not required: 
    //this.items = dataModel.items;
    //this.locked = dataModel.locked;

    $scope.newTodoText = "";
    
    $scope.addNew = function(){
        $scope.$parent.items.push($scope.newTodoText);
        $scope.$parent.progressBarItems.push($scope.newTodoText);
        $scope.newTodoText="";
    }
    $scope.showProgressBar = function(){
        $scope.$parent.showProgressBar = !$scope.$parent.showProgressBar;
    }
}


// No setup required. This is all directive based in angular. 
// Although there is an API in angular as well if required. 
/*
var dataModel = new DataModel();

$("#header").each(function(){
        var headerViewModel = new...