architecture - When should I load the state specific data in AngularJS, on loading of application or when user navigates to the particular state? -

i developing spa using angularjs. have home state default state , loads first state when application loads. on home state have provided links other states. in other states data common bound drop-down lists in states e.g. states has region drop-down , country drop-down , data bind these drop-down same. each state has 1 more drop-down list user preference , data bound drop-down list different each state. getting data database.

as region , country data common states hence on load of home state, data loaded database , saved in cache , used in other state cache , save server , database hit.

but confused user-preference data, state specific should load of while home state loading , cache or should load when user navigates other state , load user-preference data state , cache it?.

i more inclined in direction of "as , when required loading of data" database. others in team of opinion data not , take less 5 seconds user preferences states database should load while loading home state , cache (i.e. on application load itself).

please suggest should better approach , happy if provide reasoning favouring 1 on other.