dferrar dferrar - 7 months ago 24
AngularJS Question

AngularJS $route nav highlighting not working

I am using Angular $route for nav highlighting, but the highlighting does not show. Here is the code for the navigation...

<!DOCTYPE html>
<body ng-app="myApp">

<div ng-controller="myController" class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li ng-class="{active: $route.current.activetab == 'home'}"><a href="index.html">Home</a></li>
<li ng-class="{active: $route.current.activetab == 'audio'}"><a href="audio">Audio</a></li>
<li ng-class="{active: $route.current.activetab == 'bio'}"><a href="bio">Artist Bio</a></li>
<li ng-class="{active: $route.current.activetab == 'contact'}"><a href="contact">Contact</a></li>


Here is the code for the AngularJS controller with $route...

app.controller("myController", function($scope,$http, $route) {
.then(function successCallback(response){
$scope.detail = response.data;
} else{
console.log("no data");
}, function errorCallback(response) {
$scope.$route = $route;


Did you include the js library?

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>

Did you inject ngRoute into your angular module?

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