AngularJS: ng-model not updating object, but updates field in object

Question

I am working with AngularJS project and I have the following problem. I have a code:

form.html:

<form>
  <input ng-model="someVariable" type="text"/>
</form>

details.html:

<div ng-include="'form.html'"></div>
{{ someVariable }}

AngularJS Controller for details.html:

angular.module('SomeModule')
  .controller('DetailsController', function ($scope) {
  $scope.someVariable = {};
});

With this code someVariable is not displaying, but when I change ng-model to someVariable.someField, and i try to display it... it works! Could anyone explain me why?

Answer 1

Yes - the someVariable is a primitive (Boolean, null, undefined, number, string, symbol (new in ECMAScript 6)). When Angular is searching for a variable to interpolate, if it's not found on the scope it can be looked up the prototypical chain only if that variable is not a primitive, like an object for instance.

ng-include creates a new scope, and your variable is a primitive so it is not found.

When you place it under an object, the object is not found on the new child scope created by the ng-include but it is searched at the parent scope which is then found and rendered.

For more detailed info - read Understanding Scopes.