Nested 'Controller As' statements

Shows how prototypical inheritance of scope works to avoid naming collisions.

HTML

<script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<div ng-controller="NameController as ctrl" class="well">
    <div class="form-group">
        <label>Name: {{ctrl.name}}</label>
        <input type="text" class="form-control" ng-model="ctrl.name" />
    </div>
    <div ng-controller="NameController as ctrl" class="well">
        <div class="form-group">
            <label>Name: {{ctrl.name}}</label>
            <input type="text" class="form-control" ng-model="ctrl.name" />
        </div>
        <div ng-controller="NameController2 as ctrl" class="well">
            <div class="form-group">
                <label>Name: {{ctrl.sdfd}}</label>
                <input type="text" class="form-control" ng-model="ctrl.name" />
            </div>
        </div>
    </div>
</div>

JavaScript

(function () {
    angular.element(document).ready(function () {
        var app = angular.module('myApp', []);

        var NameController = function () {
            this.name = "My Name";
        };
        
        var NameController2 = function () {
            this.name = "My Name2";
        };

        app.controller("NameController", NameController);
        app.controller("NameController2", NameController2);

        angular.bootstrap(document, ['myApp']);
    });


}());