Angular - Page does not bind variable outside view when specific view url is requested
<p>I tried to solve the problem but could not find the solution for this one. I have 2 views home and cart. Home displays all the products and cart displays all the items added to the cart. Backend for this is NodeJS which just servers index file and processes views.</p>

<p>In the following index file, I have <code>{{fullCart.totalItems}}</code> . When I try <code>localhost:3000</code> then it binds perfectly by showing <code>0</code> and routes to <code>localhost:3000/home</code> but when I try <code>localhost:3000/home</code> url directly in the browser then it does not bind <code>{{fullCart.totalItems}}</code> so nothing is displayed</p>

<p>index.html</p>

<pre><code>&lt;body ng-app="bagitApp" ng-init="quanArr=[1,2,3,4,5,6,7,8,9,10]"&gt;
    &lt;div class="container-fluid nav-color navbar-fixed-top" ng-controller="headerController"&gt;
        &lt;div class="container"&gt;
            &lt;a class="navbar-brand" href="#"&gt;&lt;img class="img-responsive" src="images/logo.png"&gt;&lt;/a&gt;                 
            &lt;nav&gt;
                &lt;div class="navbar-header"&gt;
                    &lt;button type="button" class="navbar-toggle nav-btn" data-toggle="collapse" data-target="#navBar"&gt;
                        &lt;span class="icon-bar"&gt;&lt;/span&gt;
                        &lt;span class="icon-bar"&gt;&lt;/span&gt;
                        &lt;span class="icon-bar"&gt;&lt;/span&gt;
                    &lt;/button&gt;
                &lt;/div&gt;
                &lt;div class="collapse navbar-collapse" id="navBar"&gt;
                    &lt;ul class="nav navbar-nav"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;Cart&lt;/a&gt;&lt;/li&gt;           
                    &lt;/ul&gt;
                    &lt;ul class="nav navbar-nav navbar-right"&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="glyphicon glyphicon-shopping-cart"&gt;&lt;/i&gt;&lt;i class=" teal new badge"&gt;{{fullCart.totalItems}}&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
            &lt;/nav&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container pan-mar" ng-view&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>main.controller.js</p>

<pre><code>var app=angular.module('bagitApp',['ngRoute']);

app.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
    $routeProvider
    .when('/home',{
        templateUrl:'partials/Products Panel.html',
        controller:'productsController'
    })
    .when('/cart',{
        templateUrl:'partials/cart.html',
        controller:'cartController'
    })
    .otherwise({
        redirectTo:'/home'
    });
    $locationProvider.html5Mode({enabled:true,requireBase:false});

}]);

app.factory('cartService',function(){
    return {
        cart:[],
        totalItems:0
    };
});

function headerController($rootScope,$scope,cartService){
    $scope.fullCart = cartService;
    console.log("headerController")
    console.log($scope.fullCart)

}
function productsController($rootScope,$scope,cartService){

    $scope.fullCart = cartService;
    $scope.products = products;
    console.log("productsController")
    console.log($scope.fullCart)
    $scope.addToCart=function(item,quantity){
        $scope.fullCart.cart.push({item,quantity:parseInt(quantity)});
        $scope.fullCart.totalItems += parseInt(quantity); 
        console.log($scope.fullCart);
    }

    $scope.removeFromCart=function(itemId){

    }
}

app.controller('productsController',['$rootScope','$scope','cartService',productsController])
app.controller('headerController',['$rootScope','$scope','cartService',headerController])
</code></pre>

<p>Server.js</p>

<pre><code>var express = require('express');
var server = express();
var engines = require('consolidate');

server.set('views',__dirname);
server.engine('html',engines.mustache);
server.set('view engine','html')
server.use(express.static(__dirname));

server.get('/:name',function(req,res){
    res.render('index');
});

server.listen(3000,function(){
    console.log("Listening on localhost:3000");
})
</code></pre>