title: Highlight a menu element with angular
body: <p>I am new to angular. I am trying to make a menu with several categories.</p>
  
  <p>The categories are defined as <code>&lt;li&gt;...&lt;/li&gt;</code> tags. When a user selects one category, I highlight it (and un-highlight the previously selected element).</p>
  
  <p>So far, I used a combination of <code>ng-repeat</code>/<code>ng-click</code> :</p>
  
  <pre><code>&lt;ul class="nav nav-sidebar"&gt;
    &lt;li data-ng-repeat="category in categories" class="menu-element ng-scope" data-category="{{category.category}}"  data-ng-click="onClick($event)"&gt;
        &lt;a href="#" class="glyphicon glyphicon-{{category.icon}}"&gt; {{category.text}}&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And the controller : </p>
  
  <pre><code>var myApp = angular.module('myApp', []);
  myApp.controller('categoryListCtrl', function ($scope) {
  
    $scope.onClick = function(event) {
      //What must I do here?
      console.log(event);
    };
  
    $scope.categories = [
      {'category': 'home',       icon :'home',     text: 'Home'},
      {'category': 'news',       icon :'comment',  text: 'News'},
      {'category': 'brands',     icon :'tower',    text: 'Brands'},
      [...]
    ]
  }
  </code></pre>
  
  <p>When the user clicks on a <code>&lt;li&gt;</code> element, the function <code>$scope.onClick</code> is executed. </p>
  
  <p>Here, I would like to add a "highlight" class to the selected <code>&lt;li&gt;</code> and remove the "highlight" class from the previously selected <code>&lt;li&gt;</code>.</p>
  
  <p>Looking at <code>console.log(event)</code>, I see that <code>event.toElement</code> is the <code>&lt;a&gt;</code> that was clicked.</p>
  
  <p>Still looking at <code>console.log(event)</code> , I see that I can get the <code>&lt;li&gt;</code> element by using <code>event.toElement.offsetParent</code> but this is DOM manipulation and I have been told that it was evil in a controller.</p>
  
  <p><strong>Question</strong> : I put <code>the ng-click</code> directive on the <code>&lt;li&gt;</code> element, why do I get the <code>&lt;a&gt;</code> element in <code>event.toElement</code>?</p>
  
  <p><strong>Question</strong> : What is the "most angular" way to highlight/un-highlight elements?</p>