IFrame Parent Child Communication

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

app.controller('mainCtrl', MainCtrl);

function MainCtrl($scope, $window) {
  $scope.name = 'Parent Window';
  $scope.message = "";
  $scope.outsideMessages = [];
  var receiverWindow;
  var vm = this;
  var iframeMessaging = new IframeMessaging();

  $window.onload = function() {
    receiverWindow = document.getElementById("ow").contentWindow;
  }

  $window.onmessage = function(e) {
    vm.addMessage("Varun:" + e.data);
    $scope.$digest();
  }
  vm.addMessage = function(msg) {
    $scope.outsideMessages.push(msg);
  }
  vm.send = function() {
    vm.addMessage($scope.name+': ' +$scope.message);
    iframeMessaging.postMessageToIframe($scope.message,'ow');
    $scope.message = "";
  }
}

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
  <script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
  <script src="iframe-messaging.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="mainCtrl as vm">

  <div class="container row">
    <div class="col-sm-6">
      <h3>Hi {{name}}!</h3>

      <div id="msg" class="jumbotron" style="height:400px; float:auto">
        <div ng-repeat="msg in outsideMessages" ng-bind="msg">

        </div>
      </div>

      <div class="form-group">
        <input id="txtmsg" ng-keyup="$event.keyCode == 13 ? vm.send($event) : null" ng-model="message" placeholder="enter message" class="form-control" />
      </div>
      <div class="form-group">
        <button id="btnsend" ng-click="vm.send()" class="btn btn-larg btn-success">Send</button>

      </div>

    </div>
    <div class="col-sm-6">
      <iframe width="450" height="580" src="OtherPage.html" id="ow"></iframe>
    </div>
  </div>

</body>

</html>

/* Put your css in here */

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
  <script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
  <script data-require="angularjs@1.4.4" data-semver="1.4.4" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
  <script data-require="angularjs@1.4.4" data-semver="1.4.4" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-sanitize.min.js"></script>
  <script data-require="angularjs@1.4.4" data-semver="1.4.4" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
  <script src="iframe-messaging.js"></script>
  <script>
    var receiverApp = angular.module("receiverApp", []);
    receiverApp.controller("greenController", GreenController);


    function GreenController($scope, $window) {
      $scope.name = "Child Iframe Window";
      $scope.message = "";
      $scope.outsideMessages = [];
      var receiverWindow;
      var vm = this;
      $window.onload = function() {
        receiverWindow = $window.parent;
      }

      $window.onmessage = function(e) {
         vm.addMessage("Rupesh:" + e.data);
        
        $scope.$digest();
      }

      vm.send = function() {
        vm.addMessage($scope.name+': ' +$scope.message);
        receiverWindow.postMessage($scope.message, 'https://run.plnkr.co/seYy3co3uzMTikBZ/');
        $scope.message = "";
      }
      
      vm.addMessage = function(msg) {
        $scope.outsideMessages.push(msg);
      }
    }
  </script>
</head>

<body class="container" ng-app="receiverApp" ng-controller="greenController as vm">
  <h3>Hi {{name}}!</h3>


  <div id="msg" class="jumbotron" style="height:400px; float:auto">
    <div ng-repeat="msg in outsideMessages" ng-bind="msg">

    </div>
  </div>

  <div class="form-group">
    <input class="form-control" ng-keyup="$event.keyCode == 13 ? vm.send($event) : null" placeholder="enter message" ng-model="message" />

  </div>
  <div class="form-group">
    <button class="btn btn-large btn-info" ng-click="vm.send()">Send</button>
  </div>

</body>

</html>

function IframeMessaging() {
  var domain='*';
  return {
    postMessageToIframe: postMessageToIframe,
    postMessageToParent: postMessageToParent
  }
  
  function postMessageToIframe(message, targetIframeId) {
    var targetWindow = document.getElementById(targetIframeId).contentWindow;
    send(targetWindow,message);
  }
  
  function postMessageToParent(message) {
    var targetWindow = window.parent;
    send(targetWindow,message);
  }
  
  function send(targetWindow, message) {
      if (!targetWindow) return;
    targetWindow.postMessage(message, domain);
  }
}