Controller not loading value from factory after ui-router state change - angularjs

Question

I have a list of icons on a webpage generated from an object array. When the user clicks on an icon, the corresponding object from the array is passed to a function in a factory which saves the name of the object selected, then $state.go is called to change routes. On the new route a controller is loaded which loads the same factory and tries to access the name of the saved object. The problem is that about 7 times out of 10, it works perfectly, and the other 3 times is gives a "Unable to get property 'name' of undefined or null reference" type error.
Here is the controller passing the selected value to the factory:
platformHome.controller('PlatformHome', ['$scope', 'appManager', '$state', function ($scope, appManager, $state) {
var SF = appManager.state.SF;
var SO = appManager.state.SO;
$scope.productLineSelected = function (product) {
setProductLine(product);
};
function setProductLine(product) {
SF.setProduct(product);
$state.go('metricDashboard');
}
}]);
Here is the factory:
applicationManager.factory('appStateManager', ['$rootScope', '$sessionStorage', '$state', function ($rootScope, $sessionStorage, $state) {
// STATE OBJECT CLASSES
//
var stateClasses = {};
stateClasses.ProductLine = function (name) {
this.name = name;
this.dashboard = {
mode: 'reporting', //reporting, analysis
modeView: 'canvas', //canvas, data
index: {
report: 0,
userReport: 0,
canvas: 0,
group: 0,
element: 0,
filter: 0,
}
};
this.reports = [];
this.canvases = [new stateClasses.Canvas];
};
// STATE DATA FUNCTIONS
//
var stateFunctions = {};
stateFunctions.setProduct = function (product) {
session.StateObject.productLine.current = product.Code;
session.StateObject[product.Code] = (typeof session.StateObject[product.Code] === 'undefined') ? new stateClasses.ProductLine(product.Name) : session.StateObject[product.Code];
};
// STUCTURE
//
var stateScope = $rootScope.$new(true);
var session = $sessionStorage;
session.StateObject = (typeof session.StateObject === 'undefined') ? new stateClasses.StateObject : session.StateObject;
stateScope.SO = session.StateObject;
stateScope.SF = stateFunctions;
return stateScope;
}]);
Here is the controller trying to access the name:
metricDashboard.controller('MetricDashboard', ['$scope', 'appManager', function ($scope, appManager) {
var SF = appManager.state.SF;
var SO = appManager.state.SO;
DSO = SO[SO.productLine.current];
$scope.name = DSO.name;
}]);
I suspect that the issue is related to the order in which things are happening, however, I cannot figure out why it works 7 times out of 10.
When I do get the error, I have been able to determine that the line SO.productLine.current in the second controller has a value of none, meaning it doesn't seem to have been updated from the scope of the controller, however, at the same time, I'm also using console.log(JSON.stringify()) inside the factory, and the factory does indeed show a proper value instead of none.
I've also tried using $timeout on $state.go, and also tried passing it as a callback, however neither of those prevent the issue. Again 7 times out of 10, the code runs fine and the name property is value, but sometimes its not.

Answer 1

I was able to correct the problem with a few steps. The idea is to remove the assignment of the DSO variable from the MetricDashboard controller and move that functionality of assignment into the factory, then simply reference the newly assigned variable back in the controller.
Here are the changes:
In Factory
...
// STATE DATA FUNCTIONS
//
var stateFunctions = {};
stateFunctions.setProduct = function (product) {
session.StateObject.productLine.current = product.Code;
session.StateObject[product.Code] = (typeof session.StateObject[product.Code] === 'undefined') ? new stateClasses.ProductLine(product.Name) : session.StateObject[product.Code];
//new functionality for assignment
session.DynamicStateObject = session.StateObject[product.Code];
stateScope.DSO = session.DynamicStateObject;
};
// STUCTURE
//
var stateScope = $rootScope.$new(true);
var session = $sessionStorage;
session.StateObject = (typeof session.StateObject === 'undefined') ? new stateClasses.StateObject : session.StateObject;
//new structure to persist assignment beyond page refresh
session.DynamicStateObject = (typeof session.DynamicStateObject === 'undefined') ? {} : session.DynamicStateObject;
//new reference
stateScope.DSO = session.DynamicStateObject;
stateScope.SO = session.StateObject;
stateScope.SF = stateFunctions;
return stateScope;
In Controller
var SF = appManager.state.SF;
var SO = appManager.state.SO;
//Removed assignmnet
//DSO = SO[SO.productLine.current];
//Added reference
var DSO = appManager.state.DSO;
$scope.name = DSO.name;
While I have not yet tested the new code extensively, I have not been able reproduce the error.