AngularJS nested controllers with “controller as” syntax

Instead of using the $scope object, use this.

app.controller('FirstCtrl', function() {
  this.name = 'FirstCtrl';
});

app.controller('SecondCtrl', function() {
  this.name = 'SecondCtrl';
});

app.controller('ThirdCtrl', function() {
  this.name = 'ThirdCtrl';
});
<div ng-controller="FirstCtrl as first">
  <p>{{first.name}}</p>
  
  <div ng-controller="SecondCtrl as second">
	<p>
	  {{first.name}}<br/>
	  {{second.name}}
	</p>
	
	<div ng-controller="ThirdCtrl as third">
	  <p>
		{{first.name}}<br/>
		{{second.name}}<br/>
		{{third.name}}
	  </p>
	</div>
  </div>
</div>

example