Changing menu structure using ui-router and angular js

Question

I am trying to create a menu structure, where the nav bar contains some information that is selected in one of the menu options.

See the plunkr.

What I try to do

Initially the welcome state is loaded. In this state a check is being done to see if the user was previously on the site and already selected a city which was either stored in the cookie or local storage. I have removed that part of the code since it doesnt add anything. Now it just checks to see if a value is already set or not (which initially it never is). Then it redirects to the selection of the city. After the user clicked a city, the nav bar should be updated from "Soon in:" to "Soon in <your selected city> The content does show the selected city, however the navbar does not. Also when debugging, the controller that belongs to the nav bar controller is not called again, so probably that's where my error is, I have not set up the nesting of the views correctly, yet I can not see what I missed. Can someone shine some light on this for me please?

Regards Ronald

Answer 1

The soon in section is not updated because the way you are retrieving the selected city from the service is wrong, at the point of assignin the city to your $scope, nothing is selected, change your start.nav bar controller to:

controller: ["$scope", "CityService", function ($scope, CityService) {
                            $scope.$watch(CityService.getCity,function(v){
                              $scope.data = {city : v}
             },true);

and it will work, see fork.

EDIT:

Which controller do you expect to see executed again? start.nav? That one isn't called again because you are never really moving out of it, all the states you go to after your app runs are children of start.nav. The way you retrieve the selected city is wrong because that line of code only runs once, and at that point nothing is assigned to city in your service.