angularjs - Using $stateParams on a root (parent) controller? -

angularjs - Using $stateParams on a root (parent) controller? -

i have been using angularjs w/ ui-router lastly couple months , maintain running same utilize case cannot seem find elegant solution for... have step-by-step web planner application user must run through finish order.

i have root controller lives outside of ui-router scope (there no 'state' root controller) have been trying hold info global every page in web planner. info client info , order name displayed @ top , bottom of planner throughout process.

my problem in order info angular service can shared between controllers need orderid of order talking about. orderid exists in url $stateparams, problem 'root' controller gets instantiated before ui-router gets involved, meaning have no way of accessing $stateparams within controller.

i have resorted using angular's $broadcast signaler tell root controller when found orderid in url, solution not sense "right". know of improve way handle "global" info without having add together query service in every controller of application?

// root of web app <div ng-app="myapp.backups.new" ng-controller="newcontroller"> // need display "global" info <h2 class="dashtitle"><sk-img class="ibackup-add"></sk-img> new backup {{ (master.service.name ? '- ' + master.service.name : '') }}</h2> <div id="wpmenucontainer" class="wpmenucontainer"> <ul class="wpmenu clearfix"> <li ng-repeat="chevron in chevrons | filter:{disabled:false}" ng-class="{ active : chevron.active, navable : $index < index }" class="backupchevron" ng-click="!($index < index)||navigate(chevron, $index)"> <img ng-if="!$last" src="/app_themes/app/images/misc/clear.gif" class="imenuarrow"> <span>{{ chevron.name }}</span> </li> </ul> </div> // problem ui-router's scope lives within <div ui-view></div>, can't access $stateparams until these kid controllers created <div ui-view></div> </div>

have tried leveraging ui router's state alter events?

// custom mill setting/getting current state params app.factory('customfactory', function(){ var currentparams = null; homecoming { getparams: function(){ homecoming currentparams; }, setparams: function(params){ currentparams = params; } }; }); // controller app.controller('newcontroller', ['customfactory', function(customfactory){ var routeparams = function(){ homecoming customfactory.getparams() || {}; }; $scope.orderid = routeparams().orderid; }]); // set listener on '$statechangesuccess' event update params in mill app.run(['$rootscope', 'customfactory', function($rootscope, customfactory){ $rootscope.$on('$statechangesuccess', function(event, tostate, toparams, fromstate, fromparams){ customfactory.setparams(toparams); }); }]);

this way, need reference 'customfactory' service in 'app.run' , 1 controller. haven't tested of in fiddle or anything, thought should on right track.

angularjs angular-ui-router