Transferring data between controllers of different apps in Angular using a service

Question

So I am trying to pass data from a front page form of a website to an application on the website where the user can fill out some additional information.

My problem is that every time I console.log() information after getting the object from the service, it is undefined . I can console.log() when the object is set though, and this is correct.

Any ideas of what I might be doing wrong? I'm assuming it is because I think when the service gets injected, it creates a new instance of it. How can I get the data to persist?

I have a form on the front page:

<div id="zipcodeForm" ng-app="form">
    <form name="zipcodeLookup" ng-controller="FormCtrl" novalidate="true" ng-submit="zipcodeLookup.$valid &amp;&amp; submitForm()">
        <div class="error" ng-show="zipcodeLookup.$dirty &amp;&amp; zipcodeLookup.$invalid">
            <span ng-show="zipcodeLookup.zipcode.$error.pattern || zipcodeLookup.zipcode.$error.required === true">Please enter a valid zip code.<br /></span>
            <span ng-show="zipcodeLookup.residence.$error.required === true">Please choose a residency type.</span>
        </div>
        Enter Zipcode:
        <input type="text" id="zipcode" name="zipcode" required="true" ng-pattern="/^\d{{5}}(-\d{{4}})?$/" ng-model="zipcode" ng-model-options="{{debounce: 1000}}"/><br />
        <input type="radio" name="residence" value="residential" ng-model="residence" ng-required="!residence"/> Residential
        <input type="radio" name="residence" value="business" ng-model="residence" ng-required="!residence" /> Business
        <br />
        <input type="submit" id="submitButton" value="Submit" />
    </form>
</div>

App Definition:

var app = angular.module('app', ['ui.router','formService']);
var formApp = angular.module('form', ['formService']);

Form Controller:

formApp.controller('FormCtrl', ['$scope', '$element', 'FormService', function($scope, $element, formService) {

    $scope.zipcode = "";
    $scope.residence = "";

    $scope.submitForm = function() {

        var obj, object, data = $element.serializeArray();

        obj = {};

        for (object in data) {

            obj[data[object].name] = data[object].value;

        }

        formService.set(obj);

        window.location = '/application';

    };

}]);

Home Controller:

app.controller('HomeCtrl', ['FormService', function(formService) {

    var data = formService.get();

    console.log(data);

}]);

Service:

angular.module('formService', [])
    .factory('FormService', function() {

    var savedData = {};

    function set(data) {

        savedData = data;

    }

    function get() {

        return savedData;

    }

    return {
        set: set,
        get: get
    };

});

Answer 1

you are right, there are two instances created, one for each app definition. If you want to persist data between those two instances, the only choice you have is to read and write to a global variable that is defined outside of the service.

However, this is of course not recommended at all. I wonder why you have to work with two apps that are bootstrapped on one page (I assume at least that is the case). Is there no way to combine both apps into one? If so, I would go for that strategy.