Why does my service reinitialize? - angularjs

Question

On my web application, I have a menu on the left that should be the same on all pages. On top of that, whenever a page changes, the item that was selected should be selected again when the new page loads. For this I made a directive:
menu.html
<div id="sidebar-wrapper" ng-style="style()" fill-height="20">
<ul class="sidebar-nav">
<li class="component-menu" ng-repeat="component in menu.components">
<span>
<img src="img/arrow_down_ok.png" />
<span ng-class="{selected: menu.isActive(component.name)}" ng-click="menu.select(component.name,'all')" >{{ component.name }}</span>
</span>
<ul ng-if="component.devices">
<li class="device-menu" ng-repeat="device in component.devices">
<span ng-class="{selected: menu.isActive(component.name, device.name)}" ng-click="menu.select(component.name,device.name)">{{ device.name }}</span>
</li>
</ul>
</li>
</ul>
</div>
menu directive
var app = angular.module("myApp.directives", ["services"]);
app.directive("componentMenu", ["menuService", function() {
return {
restrict: "E",
templateUrl: "js/templates/menu.html",
controller: function($scope, $location, menuService) {
var that = this;
this.components = [ {
name : "pms",
devices : [ {name : "robot"}, {name : "controller"} ]
}, {
name : "bms",
devices : [ {name : "ScanningController"}, {name : "nozzle"} ]
}, ];
console.log("menu components:", this.components);
menuService.selectedComponent = "";
menuService.selectedDevice = "";
this.select = function(component, device) {
device = device || "all";
$location.search("component", component);
$location.search("device", device);
menuService.selectedComponent = component;
menuService.selectedDevice = device;
console.log("Menu selected:", menuService.selectedComponent + "/" + menuService.selectedDevice);
}
this.isActive = function(component, device) {
device = device || "all";
return component == menuService.selectedComponent && device == menuService.selectedDevice;
}
$scope.$watch(function($scope, that) {
return $location.url();
}, function(url) {
if (url) {
var component = menuService.selectedComponent;
var device = menuService.selectedDevice;
if (!(menuService.selectedComponent == component && menuService.selectedDevice == device)) {
that.select(component, device);
}
}
}
);
},
controllerAs: "menu",
};
}]);
menu service
var app = angular.module("myApp.services", []);
app.factory("menuService", [function() {
this._selectedComponent;
this._selectedDevice;
var menuSelection = {
selectedComponent: this._selectedComponent,
selectedDevice: this._selectedDevice
}
return menuSelection;
}]);
Whenever an item in the menu is selected, the console prints out the selected item correctly and next prints out the menu components (which seems correct since the URL gets changed). But when the page of the new URL is loaded, the variables inside the menu service are empty again.
Could anybody explain me why this is, as I understood that services were singletons and should keep their values.

Answer 1

When using service, it is instanciated with the new keyword which is why you bind the properties to the this and return a constructor. However you are using a factory. In that case you create an object that you return. Therefore you need your components to be instanciated with var =.