AngularJS $location.url() only works on Page Refresh - angularjs

Question

I've created a directive, called admin, which I only want to show if the base URL contains the string admin and then depending on the URL path the directive's view will show different content.
So if the user navigates to admin.example.com they will see the directive's view, they won't see it if they go to just example.com.
I've got it working to an extent, it works when I first load the angularJS app, but not when I click on different pages of the app and load different views and routes.
This is my basic App:
/* Define the `app` module */
var app = angular.module('app', ['ngRoute', 'ngTouch', 'ngAnimate', 'ui.bootstrap', 'ngSanitize']); // TODO: 'ngAnimate', 'ui.bootstrap'
app.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
class: 'home-page',
title: 'Home',
templateUrl: '/app/static/home.html',
controller: 'mainController as mainCtrl'
})
.when('/about', {
class: 'about-page',
title: 'About',
templateUrl: '/app/static/about.html',
controller: 'mainController as mainCtrl'
})
.when('/news/id-:newsId', {
class: 'news-page',
title: 'News',
templateUrl: 'app/components/news/details/newsDetailsView.html',
controller: 'newsDetailsController as newsDCtrl'
})
.otherwise({
class: 'page-not-found',
title: '404 Page Not Found',
templateUrl: '/app/static/404.html',
controller: 'mainController as mainCtrl'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
}]);
app.run(['$rootScope', function($rootScope) {
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
$rootScope.class = current.$$route.class;
$rootScope.title = current.$$route.title;
$rootScope.description = current.$$route.description;
});
}]);
app.controller('adminController', ['$location', function ($location) {
var adminCtrl = this;
adminCtrl.isAdmin = $location.host().includes('admin.example') ? true : false;
adminCtrl.urlPath = $location.url();
}])
app.directive('admin', [function(){
return {
restrict: 'E',
templateUrl: 'app/components/admin-links/adminView.html',
transclude: true,
replace: true,
controller: 'adminController as adminCtrl'
};
}]);
The problem is adminCtrl.urlPath = $location.url(); only updates when I refresh the page, not when I click on the different routes within the app and change the page without refreshing the page.
How can I get this value to update when the user navigates through the different views/routes without refreshing the page?

Answer 1

You need to use $location.path()
This will give you the route paths.
Change
adminCtrl.urlPath = $location.url();
to
adminCtrl.urlPath = $location.path();