Scope inheritance

Understanding scope inheritance

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
<div ng-app="app">
    <div>
         <h1>Scope Hierarchies</h1>
         <h4> Check the Require PII checkbox and try to enter some data in Age and DOB fields.</h4>
         <h2> Without using dot notation</h2>

        <div ng-controller='UserController'>
            <label>Name</label>
            <input type='text' name='uname' placeholder='Enter name' ng-model='uname'>
            <br/>
            <label>Initials</label>
            <input type='text' name='uinitials' placeholder='Enter Initials' ng-model='uinitials'>
            <br/>
            <label>Require PII</label>
            <input type='checkbox' name='requirePII' ng-model='requirePII'> <em>("uage" and "udob" are not created on the UserController scope, but on the scope created due to ng-if)</em>

            <div ng-if='requirePII'>
                <label>Age</label>
                <input type='number' name='uage' placeholder='Enter Age' ng-model='uage'>
                <br/>
                <label>DOB</label>
                <input type='date' name='udob' placeholder='Enter DOB' ng-model='udob'>
            </div>
            <br/>
            <label>Scope: {{user|json}}</label>
        </div>
        <br/>
         <h2> Proper use dot notation</h2>

        <div ng-controller='UserController'>
            <label>Name</label>
            <input type='text' name='uname' placeholder='Enter name' ng-model='user.name'>
            <br/>
            <label>Initials</label>
            <input type='text' name='uinitials' placeholder='Enter Initials' ng-model='user.initials'>
            <br/>
            <label>Require PII</label>
            <input type='checkbox' name='requirePII' ng-model='requirePII'> <em>("uage" and "udob" are on user object and hence not affected due to the new scope ng-if introduces.)</em>

            <div ng-if='requirePII'>
                <label>Age</label>
                <input...

JavaScript

angular.module('app', [])
    .controller('UserController', ['$scope', function ($scope) {
    $scope.user = {};
}]);