I'm struggling with the correct usage of ui-route. The examples on the angular-ui website aren't providing much help.
My goal is to create a basic navigation menu. If the route matches that of the item, I want to display a <span>, otherwise I want to show an <a>. I was expecting $uiRoute to reflect the current route, but it seems like it's not working as expected because I always see <span> elements in the output regardless of the route.
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset=utf-8 />
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
angular.module('app', ['ng', 'ui']);
</script>
</head>
<body>
<ul>
<li ui-route="#/link0">
<a ui-if="$uiRoute" ng-href="#/link0">link0</a>
<span ui-if="!$uiRoute">link0</span>
</li>
<li ui-route="#/link1">
<a ui-if="$uiRoute" ng-href="#/link1">link1</a>
<span ui-if="!$uiRoute">link1</span>
</li>
</ul>
</body>
</html>