AngularJS nested scope examples

Or just upgrade your version of Angular

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
    <div>
        <h1>Method 1</h1>
        <div>
            <label>Write here first (outer scope):</label>
            <input ng-model="obj.prop" type="text" />
            <br />
        </div>
        <div ng-if="true">
            <label>Write here first (inner scope):</label>
            <input ng-model="$parent.obj.prop" type="text" />
            <br />
        </div>
    </div>

    <div>
        <h1>Method 2</h1>
        <div>
            <label>Write here (outer scope):</label>
            <input ng-model="otherObj.prop" type="text" />
            <br />
        </div>
        <div ng-if="true">
            <label>Write here first (inner scope):</label>
            <input ng-model="otherObj.prop" type="text" />
            <br />
        </div>
    </div>

    <a href="#" ng-click="reset()">Reload the demo!</a>
</div>

CSS

body {
    padding: 20px;
}

div:after {
    content: "";
    display: table;
    clear: both;
    margin-bottom: 10px;
}

input {
    float: right;
}

JavaScript

angular.module('MyApp', []).controller('MyCtrl', function ($scope) {
    $scope.reset = function() {
        window.location.reload();
    };
    $scope.otherObj = {};
});