Think2ceCode1ce Think2ceCode1ce - 4 months ago 7
AngularJS Question

Scope inheritance with ng-bind (not working) vs {{ }} (working)

I am learning AngularJS and just done with the scope inheritance. Following is the sample code I wrote. I am referencing angular version 1.5.0


<div ng-controller="ScopeInheritanceParentController" class="scope_inheritance_parent">
<span>Parent</span><br /><br />
<!--<span ng-bind="title" /><br /><br />-->
<span>{{title}}</span><br /><br />
<input type="text" ng-model="title" /><br /><br />
<div ng-controller="ScopeInheritanceChildController" class="scope_inheritance_child">
<span>Child</span><br /><br />
<!--<span ng-bind="title" /><br /><br />-->
<span>{{title}}</span><br /><br />
<input type="text" ng-model="title" />


.controller('ScopeInheritanceParentController', ['$scope', function ($scope) {
$scope.title = "Initial title set by Parent controller ctor function"
.controller('ScopeInheritanceChildController', ['$scope', function ($scope) {
$scope.title = 'Initial title set by Child controller ctor function'

So far so good and I get the output as:
enter image description here


When I comment
syntax and uncomment
span I see the output as:
enter image description here

  1. Where is Child controller now?

  2. Why is it not displaying text box from Parent controller?

I know that
syntax creates a watcher internally and thus angular is able to update view when expression changes. I also read that
is same as
, so I would assume it works the same way.


span tag has such syntax

<span ng-bind='title'></span>