Typically i write SPA's and sharing data between controllers is simple with a service.

I am not using an SPA format (not using ng-view), and trying to share data between pages but on load of the second page (to get data) its empty.

PAGE1 (index.html):

<div ng-controller="CreateList">
    <input type="text" ng-model="myValue">
    <div ng-click="share(myValue)">Share</div>
</div>

PAGE2:

<div ng-controller="GeList">
    <p>{{ sharedData  }}</p>
</div>

JS:

app.controller('CreateList', function($scope, $location, $http, serviceShareData) {

    $scope.share= function (selectedValue) {

        if (selectedValue === undefined ) {
            console.log ("its undefined");
        }       
        else {
            console.log (selectedValue);

            serviceShareData.addData(selectedValue);
            window.location.href = "PAGE2.html";
        }
    }

});


app.controller('GeList', function($scope, $location, $http, serviceShareData) { 

    $scope.sharedData = serviceShareData.getData();

    console.log($scope.sharedData);

});

app.service('serviceShareData', function() {
    var myData = [];

    var addData = function(newObj) {
        myData.push(newObj);
    }

    var getData = function(){
        return myData;
    }

    return {
        addData: addData,
        getData: getData
    };
});

Here's a plunkr:

Typically i write SPA's and sharing data between controllers is simple with a service.

I am not using an SPA format (not using ng-view), and trying to share data between pages but on load of the second page (to get data) its empty.

PAGE1 (index.html):

<div ng-controller="CreateList">
    <input type="text" ng-model="myValue">
    <div ng-click="share(myValue)">Share</div>
</div>

PAGE2:

<div ng-controller="GeList">
    <p>{{ sharedData  }}</p>
</div>

JS:

app.controller('CreateList', function($scope, $location, $http, serviceShareData) {

    $scope.share= function (selectedValue) {

        if (selectedValue === undefined ) {
            console.log ("its undefined");
        }       
        else {
            console.log (selectedValue);

            serviceShareData.addData(selectedValue);
            window.location.href = "PAGE2.html";
        }
    }

});


app.controller('GeList', function($scope, $location, $http, serviceShareData) { 

    $scope.sharedData = serviceShareData.getData();

    console.log($scope.sharedData);

});

app.service('serviceShareData', function() {
    var myData = [];

    var addData = function(newObj) {
        myData.push(newObj);
    }

    var getData = function(){
        return myData;
    }

    return {
        addData: addData,
        getData: getData
    };
});

Here's a plunkr: http://plnkr.co/edit/6VHJhirnHZxBpKOvqzI6?p=preview

• javascript
• angularjs
• angularjs-scope
• angular-services

• 4 A different app will be instantiated on page2.html, so the service will be a new service with your data gone. – Omri Aharon Commented Apr 4, 2015 at 16:45
• 4 Sharing only works as long as the SPA is loaded. As soon as you redirect\refresh the page the data will be lost. – Chandermani Commented Apr 4, 2015 at 16:46

2 Answers 2

There is a number of ways to share data between pages - local storage, session storage, indexedDB, cookies or you can even pass you data as a paramter like this:

window.location.href = 'page2.html?val=' + selectedValue;

Here is a quick example of how your service may be looking using sessionStorage:

app.service('serviceShareData', function($window) {
    var KEY = 'App.SelectedValue';

    var addData = function(newObj) {
        var mydata = $window.sessionStorage.getItem(KEY);
        if (mydata) {
            mydata = JSON.parse(mydata);
        } else {
            mydata = [];
        }
        mydata.push(newObj);
        $window.sessionStorage.setItem(KEY, JSON.stringify(mydata));
    };

    var getData = function(){
        var mydata = $window.sessionStorage.getItem(KEY);
        if (mydata) {
            mydata = JSON.parse(mydata);
        }
        return myData || [];
    };

    return {
        addData: addData,
        getData: getData
    };
});

Plunkr is here.

When you reload the page like this

window.location.href = "PAGE2.html";

the application is initialized again with all controllers, services, etc. Use web storage in your service to store data.

Don't use default js window object in your app. If you need to work with location, use $location service. If you need to get window properties, use $window object.

Use ng-view or try ui-router.