JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="NavCtl">
    <p>Nav Controller: {{name}}</p>
    <ul class="nav nav-pills nav-stacked">
        <li><a href="#/1" ng-click='path("/1")'>One</a></li>
        <li><a href="#/2" ng-click='path("/2")'>Two</a></li>
        <li><a href="#/3" ng-click='path("/3")'>Three</a></li>
    </ul>
    The Current Path is: {{currentPath}}
</div>

<div ng-controller="CtrlTwo">
    <p>Controller Two: {{name}}</p>
    The current path is: {{currentpath}} <!-- $rootScope.currentPath? not updating -->
</div>

JavaScript

app = angular.module('app', []);

app.controller('NavCtl', ['$rootScope', '$scope', '$location', function ($rootScope, $scope, $location) {
    $scope.name = 'NavCtrl';
    $rootScope.currentPath = $location.path();
    $scope.path = function(newPath) {
        $location.path(newPath);
        $rootScope.currentPath = $location.path();
    }
}]);

app.controller('CtrlTwo', ['$scope', '$location', '$rootScope', function ($scope, $location, $rootScope) {
    $scope.name = 'CtrlTwo';
}]);