diff --git a/vipra-ui/app/index.html b/vipra-ui/app/index.html
index 215b50a1fc6e371451469ea385141febcce31fcb..8c4471f6423f35b1fd30c146947a6b40f004095a 100644
--- a/vipra-ui/app/index.html
+++ b/vipra-ui/app/index.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html lang="en" ng-app="vipra.app">
+<html lang="en" ng-app="vipra.app" ng-controller="RootController">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -51,9 +51,9 @@
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="vipra-navbar-collapse-1">
<ul class="nav navbar-nav">
- <li ui-sref-active="active"><a ui-sref="articles.index">Articles</a></li>
- <li ui-sref-active="active"><a ui-sref="topics.index">Topics</a></li>
- <li ui-sref-active="active"><a ui-sref="words.index">Words</a></li>
+ <li ng-class="{active:$state.includes('articles')}"><a ui-sref="articles.index">Articles</a></li>
+ <li ng-class="{active:$state.includes('topics')}"><a ui-sref="topics.index">Topics</a></li>
+ <li ng-class="{active:$state.includes('words')}"><a ui-sref="words.index">Words</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
diff --git a/vipra-ui/app/js/controllers.js b/vipra-ui/app/js/controllers.js
index f8a5cd6b21256f0b91efcf5d6f3ace84c1d80374..cdbd83dd059c70b0a3508d3f0b8ee3b105836570 100644
--- a/vipra-ui/app/js/controllers.js
+++ b/vipra-ui/app/js/controllers.js
@@ -14,6 +14,10 @@
pageSize = 100,
paginationPadding = 4;
+ app.controller('RootController', ['$scope', '$state', function($scope, $state) {
+ $scope.$state = $state;
+ }]);
+
/**
* Index controller
*/