location is not updating in angularjs

I have an issue with $location.path. When i change my state it’s not updating. Here is my $stateProvider

$stateProvider
  .state('state1', {
    url: 'url1',
    component: 'component1'
  })
  .state('state2', {
    url: 'url2',
    component: 'component2'
  });

When i change my route the ui will update. Here is my index.html code

   <header></header>
   <div class="container-fluid" id="page-content" ui-view></div>
   <footer></footer> 

When i change any route view only update based on the state. I need to access the current state name in header & footer templates. Here is my header.js file contains,

 angular
.module('myApp') 
.component('header', {
  templateUrl: 'header.html',
  controller: headerController
});
function headerController($stateParams, $state, $location) {
   console.log($location.path());
   console.log($state.current.name);
}

In the above code when i change to another state it is not updating. Someone suggest a solution for this.

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/10/14/location-is-not-updating-in-angularjs/
via @lzomedia #developer #freelance #web #lzomedia.com