In this article I will explain with an example, how to pass data to new browser Popup Window from Controller with AngularJS using Button and ng-click directive.
 
 
Pass data to new Browser Popup Window from Controller in AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
Main Page
The HTML markup consists of an HTML Button which is assigned AngularJS ng-click directive.
Note: If you want to learn more about ng-click directive, please refer my article AngularJS: Implement Button click event using ng-click directive example.
 
When the Button is clicked the OpenPopupWindow event handler (defined within the Controller) is called. Inside the OpenPopupWindow event handler, the new browser Popup Window is opened from Controller.
The value from the Name TextBox is assigned to the Popup Window JavaScript object.
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
            $scope.OpenPopupWindow = function () {
                var $popup = $window.open("Popup.htm", "popup", "width=250,height=100,left=10,top=150");
                $popup.Name = $scope.Name;
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        Name:
        <input type="text" ng-model="Name" />
        <br />
        <br />
        <input type="button" value="Open Popup Window" ng-click="OpenPopupWindow()" />
    </div>
</body>
</html>
 
 
Popup Page
Inside the Popup Window page Controller, the value of the Name is fetched from the $window service passed to the Controller and finally it is displayed in HTML SPAN element.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyChildApp', [])
        app.controller('MyChildController', function ($scope, $window) {
            $scope.Name = $window.Name;
        });
    </script>
    <div ng-app="MyChildApp" ng-controller="MyChildController">
        Name: <span ng-bind="Name"></span>
    </div>
</body>
</html>
 
 
Screenshot
AngularJS: Pass data to new Browser Popup Window from Controller example
 
 
Demo
View Demo
 
 
Downloads
Download Code