Example should show how to use ui-sref-active instead of ng-class

Author: lukaszb

sample/contacts.html

@@ -7,8 +7,7 @@
 
         <!-- This <li> will only add the 'active' class if 'contacts.detail' or its descendants are active
              AND if it is the link for the active contact (aka contactId) -->
-        <li ng-repeat="contact in contacts | limitTo:2"
-            ng-class="{ active: $state.includes('contacts.detail') && $stateParams.contactId == contact.id }">
+        <li ng-repeat="contact in contacts | limitTo:2" ui-sref-active="active">
 
           <!-- Here's a ui-sref that is also providing necessary parameters -->
           <a ui-sref="contacts.detail({contactId:contact.id})">{{contact.name}}</a>

sample/index.html

@@ -39,8 +39,8 @@
         <!-- Here you can see ui-sref in action again. Also notice the use of $state.includes, which
              will set the links to 'active' if, for example on the first link, 'contacts' or any of
              its descendant states are activated. -->
-          <li ng-class="{ active: $state.includes('contacts') }"><a ui-sref="contacts.list">Contacts</a></li>
-          <li ng-class="{ active: $state.includes('about') }"><a ui-sref="about">About</a></li>
+          <li ui-sref-active="active"><a ui-sref="contacts.list">Contacts</a></li>
+          <li ui-sref-active="active"><a ui-sref="about">About</a></li>
         </ul>
 
         <!-- Here is a named ui-view. ui-views don't have to be named, but we'll be populate this

sample/module.js

@@ -6,8 +6,8 @@ angular.module('uiRouterSample', ['ui.router', 'ngAnimate'])
 
         // It's very handy to add references to $state and $stateParams to the $rootScope
         // so that you can access them from any scope within your applications.For example,
-        // <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
-        // to active whenever 'contacts.list' or one of its decendents is active.
+        // <li ui-sref-active="active }"> will set the <li> // to active whenever
+        // 'contacts.list' or one of its decendents is active.
         $rootScope.$state = $state;
         $rootScope.$stateParams = $stateParams;
-      }]);
+      }]);