AngularJS
Controller as

Each controller has his own $scope.title, but what if we want to retrieve a title from a parent controller?

<div class="box" ng-controller="MainCtrl">
	<div class="box-title">MainCtrl</div>
	<div class="box-title--bind">{{title}}</div>

	<div class="box" ng-controller="SecondCtrl">
		<div class="box-title">SecondCtrl</div>
		<div class="box-title--bind">{{title}}</div>
		<div class="box-title--bind">{{title}}</div>

		<div class="box" ng-controller="ThirdCtrl">
			<div class="box-title">ThirdCtrl</div>
			<div class="box-title--bind">{{title}}</div>
			<div class="box-title--bind">{{title}}</div>
			<div class="box-title--bind">{{title}}</div>
		</div> <!-- // ThirdCtrl -->
	</div> <!-- // SecondCtrl -->
</div> <!-- // MainCtrl -->
			

Is $parent.$scope a solution? Yes and no at the same time. Can you image it with 4, 5 or 6 nested controllers with a lot of tags and nested tags? It is impossible to figure out which is the controller that refers to that particular $scope or $parent.$scope.

<div class="box" ng-controller="MainCtrl">
	<div class="box-title">MainCtrl</div>
	<div class="box-title--bind">{{title}}</div>

	<div class="box" ng-controller="SecondCtrl">
		<div class="box-title">SecondCtrl</div>
		<div class="box-title--bind">{{$parent.title}}</div>
		<div class="box-title--bind">{{title}}</div>

		<div class="box" ng-controller="ThirdCtrl">
			<div class="box-title">ThirdCtrl</div>
			<div class="box-title--bind">{{$parent.$parent.title}}</div>
			<div class="box-title--bind">{{$parent.title}}</div>
			<div class="box-title--bind">{{title}}</div>
		</div> <!-- // ThirdCtrl -->
	</div> <!-- // SecondCtrl -->
</div> <!-- // MainCtrl -->
			

You have to declare "Controller as ctrl" and also in your .js use "this" instead $scope to bind the view/model! Save your time without search the parent controller, write immediately what you need, it's easy and fast.

<div class="box" ng-controller="MainCtrl  as main ">
	<div class="box-title">MainCtrl</div>
	<div class="box-title--bind">{{main.title}}</div>

	<div class="box" ng-controller="SecondCtrl  as second ">
		<div class="box-title">SecondCtrl</div>
		<div class="box-title--bind">{{main.title}}</div>
		<div class="box-title--bind">{{second.title}}</div>

		<div class="box" ng-controller="ThirdCtrl  as third ">
			<div class="box-title">ThirdCtrl</div>
			<div class="box-title--bind">{{main.title}}</div>
			<div class="box-title--bind">{{second.title}}</div>
			<div class="box-title--bind">{{third.title}}</div>
		</div> <!-- // ThirdCtrl -->
	</div> <!-- // SecondCtrl -->
</div> <!-- // MainCtrl -->
				

angular
	.module('MyApp', [])

	.controller('MainCtrl', [function MainCtrl(){
	    var main = this;
	    main.title = "Main Ctrl Title"
	}])

	.controller('SecondCtrl', [function SecondCtrl(){
	    var second = this;
	    second.title = "Second Ctrl Title"
	}])

	.controller('ThirdCtrl', [function ThirdCtrl(){
	    var third = this;
	    third.title = "Third Ctrl Title"
	}]);