AngularJS directive for opening a new window by compiling a template for it.

var app=angular.module('App', []);
app.directive('datNewWindow', ['$window', '$timeout', '$templateCache', '$compile', function ($window, $timeout, $templateCache, $compile) {
  return {
    restrict: 'EA',
    replace: false,
    transclude: false,
    link: function (scope, elem, attrs) {
      var newWindow;
      
      elem.bind('click', function() {
        newWindow = $window.open('', '_blank', attrs.newWindowSpecs);
        initializeNewWindow();
      });

      $window.onbeforeunload = function() {
        closeNewWindow();
      }
      
      scope.$on('$destroy', function() {
        closeNewWindow();
        if ($window.onbeforeunload) {
          delete $window.unbeforeunload;
        }
      });
      
      function initializeNewWindow() {
        var newWindowBody;
        var childTemplate = getTemplate(attrs.datNewWindow);
        
        try { newWindowBody = angular.element(newWindow.document.body); }
        catch(e) { newWindowBody = false; }
        
        if (newWindowBody){ // Is page ready?
          if (childTemplate) {
            newWindowBody.append($compile(childTemplate)(scope));
            // scope.$broadcast("NEW_WINDOW_INITIALIZE", scope);
            scope.$broadcast("NEW_WINDOW_DATA_TRANSFER_TO", "Dude");
          }
          else {
            throw "Could not load '" + attrs.datNewWindow + "' template for datNewWindow directive."
          }
        }
        else{
          $timeout(initializeNewWindow, 1);
        }
      }
      
      function getTemplate(templateUrl) {
        var templateText;
        $.ajax({
            url: templateUrl,
            async: false,
            success: function(data) {
                templateText = data;
            }
        });
      
        return templateText;
      }
      
      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);
  };
  
}]);

app.controller('childController', ['$scope', function ($scope) {
  $scope.m = {
    message: ""
  };
  
  $scope.$on("NEW_WINDOW_DATA_TRANSFER_TO", function (event, data) { 
    console.log(data);
    $scope.safeApply(function() {
      $scope.m.message = data;
    });
  });

  $scope.safeApply = function(fn) {
    var phase = this.$root.$$phase;
    if(phase == '$apply' || phase == '$digest')
      this.$eval(fn);
    else
      this.$apply(fn);
  };
}]);

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <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>
    <script src="app.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>

/* Put your css in here */

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