$scope in controller div not updating after routing change

Question

I have ng-view partials that update based on routing changes in $routeProvider.

anmSite.config(function($routeProvider, $locationProvider){
$locationProvider.html5Mode(true);

$routeProvider
    //Route for home page
    .when("/", {
        templateUrl: "templates/main.html",
        controller: "imageController",
        title: "Passionate about perfection",
    })
    //Route for about page
    .when("/me", {
        templateUrl: "templates/me.html",
        controller: "imageController",
        title: "About Me",
    })
    //Route for design page
    .when("/design", {
        templateUrl: "templates/design.html",
        controller: "imageController",
        title: "Site Design",
    })
    //Route for projects page
    .when("/projects", {
        templateUrl: "templates/projects.html",
        controller: "imageController",
        title: "Projects",
    })
    //Route for photos page
    .when("/photos", {
        templateUrl: "templates/photos.html",
        controller: "imageController",
        title: "Photos",
    })
    //Default route to /
    .otherwise({
        redirectTo: "/"
    });
});

All the routes call the same 'imageController', which updates $scope based on $location.path().

anmSite.controller("imageController", function($scope, $location){

var image = {
    class: "",
    text: ""
};

var imageClass, imageText = "";
switch($location.path()){
    case "/me":
        image.class = "me";
        image.text = "Me";
        break;
    case "/design":
        image.class = "design";
        image.text = "Design";
        break;
    case "/projects":
        image.class = "projects";
        image.text = "Projects";
        break;
    case "/photos":
        image.class = "photos";
        image.text = "Photos";
        break;
    default:
        image.class = "surfer";
        image.text = "Surfer";
        break;
}
$scope.image = {
    class: image.class,
    text: image.text
};

});

I have placed a above the section in index.html which is common for all pages with 2 $scope variables that need to be updated for each route.

<div ng-controller="imageController">
    <div class="image-container {{ image.class }}">
        <h1>{{ image.text }}</h1>
    </div>
</div>

<div class="ng-view"></div>

This works when the page first loads, but the ng-controller div does not get updated for each route change, even though the $scope variables get updated (checked with console.log). Is it possible to update the ng-controller view? Do I need to use other Directives? I would appreciate any suggestions.

Answer 1

Please try by moving your code between "ng-view". As per angular documentation

ngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

Something like

<div class="ng-view">

<div ng-controller="imageController">
<div class="image-container {{ image.class }}">
    <h1>{{ image.text }}</h1>
</div>
</div>
</div>

Edit - As per conversation comments below the approach that worked is to have a directive and inside the link function it will track $routechangeevents like $routechangestart which will run everytime on route change and will update your scope every time

Hope this helps,

Happy Learning