JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<base href="/" target="_blank">

<ul class="nav navbar-nav">
     <li ng-class="{'active': $route.current.activetab == 'home'}"><a href="home">Home</a></li>
     <li ng-class="{'active': $route.current.activetab == 'about'}"><a href="about">About</a></li>
     <li ng-class="{'active': $route.current.activetab == 'services'}"><a href="services">Services</a></li>
     <li ng-class="{'active': $route.current.activetab == 'house'}"><a href="house">The house</a></li>
     <li ng-class="{'active': $route.current.activetab == 'gallery'}"><a href="gallery">Gallery</a></li>
     <li ng-class="{'active': $route.current.activetab == 'contact'}"><a href="contact">Contact</a></li>
</ul>
<div ng-view></div>

CSS

.active {
  color: red;
}

JavaScript

angular.module('home', ["ngRoute"]).
config(function ($routeProvider, $locationProvider) {
    $routeProvider.
        when('/home', { template: '<p>home</p>', activetab: "home" }).
        when('/about', { template: '<p>about</p>', activetab: "about" }).
        when('/gallery', { template: '<p>gallery</p>', activetab: "gallery" }).
        when('/contact', { template: '<p>contact</p>', activetab: "contact" }).
        when('/services', { template: '<p>services</p>', activetab: "services" }).
        when('/house', { template: '<p>house</p>', activetab: "house" }).
        otherwise({ redirectTo: '/home', activetab: "home"});
    $locationProvider.html5Mode(true);
}).run(function ($rootScope, $route) {
    $rootScope.$route = $route;
});