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 center>
            <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.directive('center',function($window){
  return {
    restrict : "A",
    scope:true,
    controller: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;

    });
  },
link : function(scope,elem,attrs){

  var resize = function() {
    var winHeight = $window.innerHeight - 90,
        overlayHeight = elem[0].offsetHeight,
        diff = (winHeight - overlayHeight) / 2;
        elem.css('top',diff+"px");
  };
  angular.element($window).bind('resize',function(e){
    console.log(scope.$parent.data.overlaytype)
    resize();
      });
    }
  };
});