Factory not keeping data when used in controller - angularjs

Question

I have a factory House
'use strict';
myApp
.factory('House', [ '$http', '$location', '$rootScope', function($http, $location, $rootScope){
var numberOfDoors;
return {
loadHouse: function(){
numberOfDoors = 1;
},
numberOfDoors: numberOfDoors
};
}]);
And I have a controller Owner
myApp
.controller('OwnerCtrl', ['$rootScope', '$scope', '$location', 'House', function($rootScope, $scope, $location, House) {
$scope.buildMe = function() {
//use value from house
var sayHelloToDoors = House.numberOfDoors;
};
}]);
If I run a function House.loadHouse() in some other controller in order to set the variable numberOfDoors - I do set it, but when I switch to a page to reuse that number, I get a undefined message in Owner controller.
Why the value is cleared? It seems like another instance of House is transfered.
Could anybody help?

Answer 1

This is because you're assigning the value of private numberOfDoors to the field numberOfDoors in the factory.
// This following snippet ...
myApp.factory('house', function() {
var numberOfDoors;
return {
numberOfDoors: numberOfDoors
};
});
// ... will actually become
myApp.factory('house', function() {
var numberOfDoors; // === undefined
return {
numberOfDoors: undefined
};
});
Even if you would assign the private numberOfDoors an initial value, it would not behave the way you want it to.
myApp.factory('house', function() {
var numberOfDoors = 123;
return {
loadHouse: function() {
numberOfDoors = 1; // will change the private variable
// not the exposed object variable
},
numberOfDoors: numberOfDoors // will always be 123
};
});
Easiest way to make this work is doing something like this:
myApp.factory('house', function() {
return {
reset: function() {
this.numberOfDoors = 0;
},
numberOfDoors: 0
};
});
You can play with in action at this plunker.
Edit:
To encapsulate the number of doors you could do something like this:
myApp.factory('house', function() {
var _numberOfDoors = 0;
return {
reset: function() {
_numberOfDoors = 0;
},
numberOfDoors: function(value) {
if(value!==undefined) {
_numberOfDoors = value;
}
return _numberOfDoors;
}
};
});
Now from your controller you can:
var count = house.numberOfDoors(); // Get the numberOfDoors
house.numberOfDoors(++count); // Set the numberOfDoors

Answer 2

You'll have to change "numberOfDoors: numberOfDoors" to "numberOfDoors: function(){return numberOfDoors;}"
Please see this simple: (available in plnkr)
var service = (function(){
var privateVar = 0;
return{
updateVar: function(val){
privateVar = val;
},
getVar2: privateVar,
getVar: function(){
return privateVar;
}
}
})();
var instanceA = (function(){
service.updateVar(1);
alert(service.getVar());
})();
var instanceB = (function(){
alert(service.getVar());
alert(service.getVar2);
})();