Controller As

AngularJs Controller As example

by Aaronias

HTML

<div ng-app="app">

    <fieldset ng-controller="mainCtrl" class='container main'>
        <legend>{{title}}</legend>
        <button>{{text}}</button>
        <fieldset ng-controller="childCtrl as child"  class='container child'>
            <legend>{{child.title}}</legend>
            <button>{{text}}</button>
            <button>{{child.text}}</button>
            <fieldset ng-controller="grandchildCtrl as grandchild"  class='container grandchild'>
                <legend>{{grandchild.title}}</legend>
                 <button>{{child.text}}</button>
                 <button>{{grandchild.text}}</button>
            </fieldset>
        </fieldset>
        
    </fieldset>
    
</div>

CSS

</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
<style>

/*
    mainCtrl
        childCtrl
        siblingCtrl
            grandchildCtrl




*/

.container {
 border:1px solid black;
  list-style:none;
  margin:0;
  padding:25px;  
    border-radius:3px;
}

.main {
    background-color: #3366CC; 
    color: black;
}
.child {
    background-color: #3399FF; 
}
.grandchild {
    background-color: 	 #66CCFF; 
}
body{
    background-color: gray;
}

button{
    padding: 3px;
    margin-bottom: 5px;
    border-radius:5px;
    background-color: lightgray;
}

JavaScript

var app = angular.module("app", []);

app.controller("mainCtrl", function($scope){
    $scope.text = "Main's Button";
    $scope.title = "Main Scope";
});

app.controller("childCtrl", function(){
    this.text = "Child's Button";
    this.title = "Child Scope";
});

app.controller("grandchildCtrl", function(){
    this.text = "Grandchild's Button";
    this.title = "Grandchild Scope";
});