JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    
    <nav track-active>
         <a href="#/">Page 1</a>
         <a href="#/page2">Page 2</a>
         <a href="#/page3">Page 3</a>
    </nav>
    
</div>

CSS

body{
    font-family:sans-serif;
}

nav {
    background: #000;
    display:flex;
	flex-direction: row;
}

nav > a {
	color:  #ccc;
	text-decoration:none;
	text-align:center;
    flex: 1 1 auto;
    padding: 10px;
}

nav > a.active {
	color:  #fff;
    background: #333;
}

JavaScript

var myApp = angular.module('myApp',[]);

// normally your routes would do this, but ngRoute wasn't working in fiddle:
document.location.hash='#/';

myApp.directive('trackActive', function($location) {
	function link(scope, element, attrs){
		scope.$watch(function() {
			return $location.path();
		}, function(){
			var links = element.find('a');
			links.removeClass('active');
            angular.forEach(links, function(value){
                var a = angular.element(value);
                if (a.attr('href') == '#' + $location.path() ){
                    a.addClass('active');
                }
            });
		});
	}
	return {link: link};
});