angularJS- initiate HTTP Call from a controller failed

I am building a website using angularJS and PHP. Website has many pages like- Home, About Us etc.

So, I have created a common header for the website which I included in my HTML view like this:

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Demo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
        <script src="angular.min.js"></script>
        <script src="angular-route.min.js"></script>
        <script src="commonController.js"></script>
        <script src="homeController.js"></script>
        <script src="loginController.js"></script>

        <script src="app.js"></script>

    </head>
    <body>
        <div class="header" ng-controller="CommonController"
             ng-include="'header.html'"></div>
        <div class="main" ng-view></div>
    </body>
</html>

and the header (header.html) page looks like this:

<nav class="navbar-inverse navbar-fixed-top" role="navigation">
    <a  href="#/home">Home</a>
    <a  href="#/notifications" >{{vm.commonId}}</a>
</nav>

and header controller has a http call which fetches user id and I am trying to show this id as a label for one of the links mentioned above (commonController.js)

(function() {

    angular
        .module('myApp.common', ['ngRoute'])

        .factory('myCommonService', function($http) {
            var baseUrl = 'api/';
            return {
                getBasicUserInfo:function() {
                    return $http.get(baseUrl + 'getBasicUserInformation');
                }
            };
        })

        .controller('CommonController', function($scope, $routeParams, myCommonService) {
            var vm = this;      
            myCommonService.getBasicUserInfo().success(function(data) {
                vm.commonId = data.id;
            }); 
        });
})();

But when I navigate through pages, header remains same. So, I'm not able to initiate that http call. There are many pages in my website.

Can this be done? I'm pretty much new to this platform.

Route (app.js)

(function() {

    angular.module('myApp', [
        'ngRoute',
        'myApp.login',
        'myApp.home',
        'myApp.common'
    ])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
        .when('/login', {
            controller: 'LoginController',
            templateUrl: 'loginView.html',      
            controllerAs: 'vm'
        })
        .when('/home', {
            controller: 'HomeController',
            templateUrl: 'homeView.html',       
            controllerAs: 'vm'          
        })
        .otherwise({
            redirectTo: '/login'
        });
    }]);
})();

P.S: I excluded other pages to reduce complexity and make my query easy to understand.

Thanks!

Solution

Seems to me all that is missing is letting the template know the scoped alias for the controller

<div class="header" ng-controller="CommonController as common"
     ng-include="'header.html'"></div>

and in header.html

<a href="#/notifications">{{common.commonId}}</a>

Note that I've used common instead of vm as some of your routes are using vm and it's best to avoid conflicts.

If you want to trigger an update on page navigation (ie, route change), change your CommonController to this

.controller('CommonController', function($scope, myCommonService) {
    var ctrl = this;
    var update = function() {
        myCommonService.getBasicUserInfo().then(function(res) {
            ctrl.commonId = res.data.id;
        });
    };
    update();

    $scope.$on('$routeChangeSuccess', update);
});