title: How to show a navigation menu with AngularJS which changes 'active' class depending on which route is being viewed?
body: <p>I simply want to show a navigation menu like the following in my app:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;a href="#/section1"&gt;Section 1&lt;/a&gt;&lt;/li&gt;
  
    &lt;li class="active"&gt;&lt;a href="#/section2"&gt;Section 2&lt;/a&gt;&lt;/li&gt;
  
    &lt;li&gt;&lt;a href="#/section3"&gt;Section 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here, clicking section 1, section 2, or section 3 will each trigger a route change. Currently the <code>&lt;li&gt;</code> for section 2 has the class <code>active</code> which means its the currently active route. I simply want to move this class around, so e.g if Section 3 is clicked, I want the <code>li</code> for section 3 to have the <code>active</code> class.</p>
  
  <p>What's the best way to achieve this? </p>