AngularJS directive for opening a window by passing it a URL

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="angular.js@1.3.1" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="App" ng-controller="parentController">
    <h1>Hello Plunker!</h1>
    <div>
      <input type="text" ng-model="m.newMessage" />
      <button type="button" ng-click="submitMessage()">submit</button>
    </div>
    <a href="" dat-new-window="yo.html" new-window-app-element="#remoteApp" new-window-specs="width=200,height=200">open new window</a>
  </body>

</html>

var app=angular.module('App', []);
app.directive('datNewWindow', ['$window', '$timeout', function ($window, $timeout) {
  return {
    restrict: 'EA',
    replace: false,
    transclude: false,
    link: function (scope, elem, attrs) {
      var newWindow;
      var newWindowScope;
      
      elem.bind('click', function() {
        newWindow = $window.open(attrs.datNewWindow, '_blank', attrs.newWindowSpecs);
        initializeNewWindow();
      });
      
      scope.$on('NEW_WINDOW_DATA_TRANSFER_TO', function(event, data) {
        newWindowScope.$broadcast("NEW_WINDOW_DATA_TRANSFER_TO", data);
      }); 
      
      $window.onbeforeunload = function() {
        closeNewWindow();
      }
      
      scope.$on('$destroy', function() {
        closeNewWindow();
        if ($window.onbeforeunload) {
          delete $window.unbeforeunload;
        }
      });
      
      function initializeNewWindow() {
        var newWindowInjector;
        
        try { newWindowInjector = newWindow.angular.element(attrs.newWindowAppElement).injector(); }
        catch(e) { newWindowInjector = false; }
        
        if(newWindowInjector){ // Is page ready?
          newWindowScope = newWindowInjector.get('$rootScope');
          newWindowScope.$broadcast("NEW_WINDOW_INITIALIZE", scope);
          newWindowScope.$broadcast("NEW_WINDOW_DATA_TRANSFER_TO", "Dude");
        }
        else{
          $timeout(initializeNewWindow, 1);
        }
      }
      
      function closeNewWindow() {
        if (newWindow) {
          newWindow.close();
        }
      }
    }
  };
}]);
app.controller('parentController', ['$scope', function ($scope) {
  $scope.m = {
    newMessage: null
  }
  
  $scope.submitMessage = function () {
    $scope.$broadcast("NEW_WINDOW_DATA_TRANSFER_TO", $scope.m.newMessage);
  };
  
}]);




var remoteApp=angular.module('RemoteApp', []);
remoteApp.controller('childController', ['$scope', function ($scope) {
  $scope.m = {
    message: ""
  };
  
  $scope.$on("NEW_WINDOW_DATA_TRANSFER_TO", function (event, data) { 
    console.log(data);
    $scope.$apply(function() {
      $scope.m.message = data;
    });
  });
  
  $scope.$on("NEW_WINDOW_INITIALIZE", function (event, data) {                   
    $scope.$apply(function() {
      $scope.m.parentWindowScope = data;
    });
  });
}]);

/* Styles go here */

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="angular.js@1.3.1" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body id="remoteApp" ng-app="RemoteApp" ng-controller="childController">
    <h1>Yo {{m.message}}!</h1>
  </body>

</html>