JSFiddle - React, Tailwind, and code Playground

by Pablo Leone

HTML

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <form role="form" ng-app data-ng-controller="MyCtrl">
                	<h2>Parent Scope</h2>

                <div class="form-group">
                    <label>Primitive</label>
                    <input type="text" class="form-control" ng-model="name" />
                </div>
                <div class="form-group">
                    <label>Object</label>
                    <input type="text" class="form-control" ng-model="user.name" />
                </div>
                <hr>
                <div class="col-md-12">
                    <div class="nested" ng-controller="MyNestedCtrl">
                        	<h2>Nested Scope</h2>

                        <div class="form-group">
                            <label>Primitive</label>
                            <input type="text" class="form-control" ng-model="name" />
                        </div>
                        <div class="form-group">
                            <label>Primitive with explicit $parent reference</label>
                            <input type="text" class="form-control" ng-model="$parent.name" />
                        </div>
                        <div class="form-group">
                            <label>Object</label>
                            <input type="text" class="form-control" ng-model="user.name" />
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

CSS

@import url(//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css);

JavaScript

function MyCtrl($scope) {
    $scope.name = "Peter";
    $scope.user = {
        name: "Parker"
    };
}

function MyNestedCtrl($scope) {}