Sharing subtotal across controllers in Angular - angularjs

Question

I'm trying to share a subtotal calculated in one controller with another controller. When I use the code below, I get a total is not defined error.
I'd really appreciate suggestions on how to get this working right.
I'm using this Stackoverflow post as a model.
.factory('serviceA', function() {
var serviceA = {
amount: null
};
return serviceA;
})
.controller('ProjectListCtrl', function ($scope, serviceA, Projects) {
var projectList = this;
projectList.projects = Projects;
serviceA.amount = total;
projectList.total = function () {
var total = 0;
angular.forEach(projectList.projects, function (project) {
total += project.type.cost;
});
return total; //want to use this total in other controller
};
})
.controller('PaymentFormCtrl',
function ($scope, $http, serviceA) {
$scope.serviceA = serviceA;
console.log(serviceA);
// . . .
});

Answer 1

You may want to use a Service in this case as services are singletons, which means that only one will be created and each controller will be using the same service, rather than them using their own factory.
.service('serviceA', function() {
var amount = 0;
return {
get: function () {
return amount;
},
set: function (value) {
amount = value;
}
};
});
In the first controller you want to assign the amount in serviceA when in the projectList.total function rather than outside of it.
.controller('ProjectListCtrl', function ($scope, serviceA, Projects) {
var projectList = this;
projectList.projects = Projects;
projectList.total = function () {
var total = 0;
angular.forEach(projectList.projects, function (project) {
total += project.type.cost;
serviceA.set(total);
});
//return total; //want to use this total in other controller
};
})
Also, serviceA is a service so you use it like an object rather than assigning it to a variable
.controller('PaymentFormCtrl',
function ($scope, $http, serviceA) {
var total = serviceA.get();
console.log(total);
});