How to get the nested model from parent scope?

Question

How to get the nested model from parent scope?

Html code:

<body ng-controller="MainCtrl">
  <h1>Outer: {{aaa.bbb}}</h1>
  <div ng-controller="InnerCtrl">
    <h1>Inner1: {{$parent['aaa']}}</h1>
    <h1>Inner2: {{$parent['aaa.bbb']}}</h1>
  </div>
</body>

Angularjs code:

app.controller('MainCtrl', function($scope) {
  $scope.aaa = {
    bbb:'Freewind'
  }
});

app.controller('InnerCtrl', function($scope){
});

The rendered html will be:

Outer: Freewind

Inner1: {"bbb":"Freewind"}

Inner2:

You can see the Inner2: is empty.

How can I show it?

Here is a live demo: http://plnkr.co/edit/7IfxgsNCaUpKH9HOpr26?p=preview

scope
angularjs

Answer 1

The InnerCtrl scope inherits the properties from its parent scope (MainCtrl scope), therefore you can access those properties directly:

<div ng-controller="InnerCtrl">
    <h1>Inner1: {{aaa}}</h1>
    <h1>Inner2: {{aaa.bbb}}</h1>
</div>