sharing variables between controllers after opening new window angularjs

Question

I am in a situation where I have to pass a user-defined object from one controller to another controller, which is opened in a new window. I tried several common ways for that, like $emit to $rootScope using a factory or a service and $broadcast from there to the second controller.

But I always get stuck in the rootscope. I can log the variables there, but they seem to vanish when the new window opened (not even a undefined appears in the console of the new window). I can get fixed variables from rootscope, but nothing that was emitted from the first controller.

Does anybody have an idea how I can solve this?

Here is my code:

// SHARING DATA BETWEEN CONTROLLERS VIA ROOT SCOPE:

var table_app = angular.module("tableApp", [])
.factory("sharedVars", function($rootScope, $log) {
    /*
     Receive emitted message and broadcast it.
     */
    $rootScope.$on("handleEmit", function(event, object){
        var value1 = object.data1;
        var value2 = object.data2;
        var value3 = object.data3;
        $log.log(value2, value3)           // WORKS
        $rootScope.$broadcast("handleBroadcast", 
            {data1: value1, data2: value2, data3: value3});
    })

    // JUST TO CHECK IF I CAN GET DATA FROM HERE:
    return { fixedSharedObject: {data1: 22, data2: 33, data3: 44}}  // WORKS
})
.controller("FirstCtrl", function ($scope, $rootScope, $q, $log, sharedVars) {
    $scope.onClick = function(number, adress) {
        newWindow = window.open(adress, "Zweitfenster", "width=700, height=900");
        newWindow.focus();
        var lineNumber = document.getElementById("lineCell" + number).innerHTML;
        var blockNumber = document.getElementById("blockCell" + number).innerHTML;
        var tripId = document.getElementById("tripCell" + number).innerHTML;
        $log.log(lineNumber, blockNumber, tripId);                             // WORKS
        $scope.$emit("handleEmit", 
            {data1:lineNumber, data2: blockNumber, data3: tripId});
    }
})
.controller("SecondCtrl", function($scope, $rootScope, $log, sharedVars){
    $scope.singleTripLineNumber = sharedVars.fixedSharedObject;               // WORKS
    $scope.singleTripBlockNumber = sharedVars.fixedSharedObject;
    $scope.$on("handleBroadcast", function(event, object){
        var value1 = object.data1;
        var value2 = object.data2;                                    // DOES NOT WORK!
        var value3 = object.data3;
        $log.log(value3)
    })
});

Answer 1

You CANNOT do that this way. The JS environments between windows/tabs are not shared. What can you do:

• Pass the data as URL/path parameters in window.open(), retrieve them using the $location service from the target controller.
• Use browser's local storage (session storage is not shared between tabs, see comment from ejain) if supported, cookies if not.