JSFiddle - React, Tailwind, and code Playground

by Mark Pieszak

HTML

<div ng-controller="NavCtl">
    <p>Nav Controller: {{name}}</p>
    <ul class="nav nav-pills nav-stacked">
        <li><a href="#/1" ng-click="update()">One</a></li>
        <li><a href="#/2" ng-click="update()">Two</a></li>
        <li><a href="#/3" ng-click="update()">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', '$timeout', function ($rootScope, $scope, $location, $timeout) {
    $scope.name = 'NavCtrl';
    $scope.currentPath = $location.path();
    $scope.update = function () {
        $timeout(function () {
            $scope.currentPath = $location.path();
        }, 0);
    }
}]);

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