JSFiddle - React, Tailwind, and code Playground

by swoogie

HTML

<div ng-controller="NavCtl">
    <p>Controller One: {{name}}</p>
    <ul class="nav nav-pills nav-stacked">
        <li><a href="#/1">One</a></li>
        <li><a href="#/2">Two</a></li>
        <li><a href="#/3">Three</a></li>
    </ul>
    The Current Path is: {{currentPath}}
</div>
<hr />
<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.$on('$locationChangeStart', function(event, to, from) {
     $rootScope.currentPath = to.split('/').pop();
    });
}]);

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