AngularJS Scope propagation from child to parent

How to propagate your var value from a child to a parent? Answer on my blog http://vincentaudebert.github.io/

by Vincent Audebert

HTML

<div ng-controller="YourParentController">
    <div>Your local message: {{displayMessage}}</div>
    <div>Your global message: {{container.displayMessage}}</div>
    
    Init child <input type="checkbox" ng-model="checked" ng-init="checked=false" />
    
    <div ng-if="checked">
        <div ng-controller="YourChildController">
            <div>Your local message: {{displayMessage}}</div>
            <div>Your global message: {{container.displayMessage}}</div>
        </div>
    </div>
</div>

JavaScript

angular.module("YourModule", [])
    .controller("YourParentController", function YourParentController($scope) {
    $scope.displayMessage = "From Parent local";
    $scope.container = {};
    $scope.container['displayMessage'] = "From Parent global";
 
})
.controller("YourChildController", function YourChildController($scope) {      
    $scope.init = function() {
        $scope.displayMessage = "From Child local";
        $scope.container['displayMessage'] = "From Child global";
    };
        
    $scope.init();   
});