ng-model as object example

Showing an arbitrary example of how not making ng-model an object can cause binding issues.

by Steven Lambert

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.angularjs.org/1.2.18/angular.min.js"></script>
<div id="controller" ng-controller="myCtrl"><span>Outside Controller: Your name is: {{name}}</span>

    <div ng-controller="childCtrl"> <span>Inside Controller: Your name is: {{name}}</span>

        <fieldset legend="User details">
            <input ng-model="name">
        </fieldset>
    </div>
</div>

JavaScript

angular.module('myApp', []);

angular.module('myApp')
    .controller('myCtrl', function ($scope) {
    $scope.name = "username";
    //$scope.user = { name: 'username' };
});

angular.module('myApp')
    .controller('childCtrl', function ($scope) {
});