Watch modification then notify children

by DotDotDot

HTML

<div ng-app='tt'>
    <div ng-controller='firstCtrl'>
        <p>{{overlaytype}}</p>
        <input type='button' ng-click='modifyIt()' value='Change It' />
        <div ng-controller='secondCtrl'>
            <p>Has it been changed : {{overlayChanged.isChanged}}</p>
            <p>The current value is : {{overlayChanged.value}}</p>
        </div>
    </div>
</div>

CSS

</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<style>

JavaScript

var tt=angular.module('tt',[]);

tt.controller('firstCtrl',function($scope){
    $scope.overlaytype=42;
    $scope.modifyIt=function(){
        $scope.overlaytype+=42;
    }
    $scope.$watch('overlaytype', function(newVal, oldVal){
        if(newVal!=oldVal)
            $scope.$broadcast('overlaychange',{"val":newVal})
    });

});
tt.controller('secondCtrl',function($scope){
    $scope.overlayChanged={"isChanged":"No","value":""};
    $scope.$on('overlaychange', function(event, args){
        console.log("change detected")
        $scope.overlayChanged.isChanged="Yes";
        $scope.overlayChanged.value=args.val;
    
    });


});