Angular service loses set data in new controller - angularjs

Question

I have a link that I want to use to pass data to another page. I am able to access the service on the page I go to, but the data is empty.
The HTML:
Female
The service:
var app = angular.module('boxHome', []);
app.controller('boxHomeController', function ($scope, SubscriptionService) {
$scope.saveSubscriptionData = function() {
SubscriptionService.gender = 'male';
SubscriptionService.subscription = 'infant';
console.log(SubscriptionService);
}
});
app.factory('SubscriptionService', function () {
return {
gender: '',
subscription: ''
};
});
The above log statement returns gender: 'male' and subscription: 'infant'.
The page I link to:
var appSignup = angular.module('boxSignup', ['boxHome']);
appSignup.controller('boxSignupController', function ($scope, SubscriptionService) {
$scope.init = function (domainId) {
console.log(SubscriptionService);
};
});
I expect the above log statement to return gender: 'male' and subscription: 'infant'. It returns gender: '' and subscription ''.
Any ideas?

Answer 1

app.service('SubscriptionService',function(){
var gender='';
var subscription='';
this.save=function(gender,subscription){
this.gender=gender;
this.subscription=subscription;
};
this.getGender=function(){
return gender;
};
this.getSubscription=function(){
return subscription;
};
});
.controller('boxHomeController', function ($scope, SubscriptionService) {
$scope.saveSubscriptionData = function() {
SubscriptionService.save('male','infant');
}
});

Answer 2

You are returning new instances of the JSON object with each call to the factory and thus not sharing state. To fix this, declare an object inside the factory that gets returned instead:
app.factory('SubscriptionService', function () {
var service = {};
var info = {};
info.gender = '';
info.subscription = '';
service.getInfo = getInfo;
function getInfo(){
return info;
}
return service;
});
When you use it:
var info = SubscriptionService.getInfo();
console.log(info.subscription);