Communications between nested controllers - angularjs

Question

I am new to angular, searched for a good solution for the below but couldnt find a good option.
I have an extremelly sipmple modal dialog controlled by ModalDialogCtrl that contains an edited object, such as Rabbit or Dog or Cat or anything else. I want same functionality for any object allowing Save when user presses "Save" button.
Dialog's viewmodel has a nested view for the object being edited whose template name is substituted depending on the type of edited object. This specific view contains object-specific controller.
Modal controller:
function ModalDialogCtrl($scope) {
// $scope.objectSpecificViewModelTemplate = "rabbit.html";
// or
// $scope.objectSpecificViewModelTemplate = "dog.html";
// etc
ctrl.save = function () {
// need to call inner object controller's save() method here
};
ctrl.cancel = function () {
// cancel editing
};
};
Modal dialog view:
<div class="modal-header">
<!-- Modal header -->
</div>
<div class="modal-body" id="modal-body">
<!-- Modal body containing object-specific view model -->
<div ng-include src="objectSpecificViewModelTemplate"></div>
</div>
<div class="modal-footer">
<!-- Modal buttons -->
<button class="btn btn-primary" type="button">OK</button>
<button class="btn btn-warning" type="button">Cancel</button>
</div>
Object-specific view templates:
<div ng-controller="RabbitCtrl">
<p>Weight: <input type="text" ng-model="rabbit.weight" /></p>
</div>
or
<div ng-controller="DogCtrl">
<p>Color: <input type="text" ng-model="dog.color" /></p>
</div>
Object-specific controllers:
function RabbitCtrl($scope) {
$scope.rabbit = { weight: 5}
$scope.save = function() { /* save to server */ };
}
function DogCtrl($scope) {
$scope.dog = { dog: "black"}
$scope.save = function() { /* save to server */ };
}
What I need is to call inner object's save() method when user presses Save button. And I want the modal controller and object-specific controllers be decoupled as I might want to reuse them in different spots of the application. So I think gennerally my question looks like: how to make parent controller to call specific nested controller method (there can be many nested controllers) or how to make inner controller to call specific parent's controller method?

Answer 1

I see too ways here:
Use events.
Use require. In child controller you require parent and call i.e.:
parentCtrl.register(childCtrl)
Now in parentCtrl you store link to child:
vm.register = function(child) {
vm.containedComponent = child;
}
and can call any method of it. (i.e. onSave)
(This is not that bad if you sure that your parent will always have exactly one child, however if child may change using ng-if you will need to manually unregister it)