I have been working on sharing data between controllers in AngularJS using a factory, but I am facing an issue. Despite following solutions from similar questions, I can only get it to work the first time around. In my app, there are 3 different states, with one of them being a simple calculator. My goal is to display the total from the calculator state in a separate state as well. However, with the current code, the total always shows up as 0, indicating that it only works initially and does not update when the 'total' value changes. Any suggestions on how to resolve this?
HTML:
<div class="list card">
<div class="item item-divider">Total</div>
<div class="item item-body">
<div ng-model="figure">
<b>{{figure}}</b> calories consumed today
</div>
</div>
</div>
'home' controller:
.controller('homeCtrl', function($scope, total) {
$scope.figure = total.get();
})
Calculator Controller:
.controller('calcCtrl', function($scope, total) {
$scope.result = 0;
$scope.reset = function() {
$scope.result = 0;
};
$scope.add = function(i) {
if(!i){
}else {
$scope.result = $scope.result + parseInt(i);
total.set($scope.result);
}
};
});
Factory
.factory('total', function() {
var val = 0;
return {
get: function() {
return val;
},
set: function(num) {
val = parseInt(num);
}
};
})