A way to solve this without having to rely on URLs is to add a custom attribute to every partial during $routeProvider
configuration, like this:
$routeProvider.
when('/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: widgetsController,
activetab: 'dashboard'
}).
when('/lab', {
templateUrl: 'partials/lab.html',
controller: widgetsController,
activetab: 'lab'
});
Expose $route
in your controller:
function widgetsController($scope, $route) {
$scope.$route = $route;
}
Set the active
class based on the current active tab:
<li ng-class="{active: $route.current.activetab == 'dashboard'}"></li>
<li ng-class="{active: $route.current.activetab == 'lab'}"></li>