title: Show / Hide elements with AngularJs
body: <p>I was trying to show and hide an element child, so when I hover over a <code>&lt;li&gt;</code> element, I set up a <code>ng-show</code> with value <code>false</code> for all the elements. If I try to make the value <code>true</code> to show, it shows me all the child elements. I just want to display for each element hovered its child:</p>
  
  <p><strong>HTML CODE:</strong></p>
  
  <pre><code>&lt;ul ng-init="show=false"&gt;
      &lt;li&gt;
          &lt;a class="list-group-menu" href="#"&gt;&lt;div class="icon-user"&gt;&lt;/div&gt;&lt;/a&gt;
          &lt;div ng-show="show"&gt; Profile &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a class="list-group-menu" href="#"&gt;&lt;div class="icon-scope"&gt;&lt;/div&gt;&lt;/a&gt;
          &lt;div ng-show="show"&gt; Scope &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a class="list-group-menu" href="#"&gt;&lt;div class="icon-job"&gt;&lt;/div&gt;&lt;/a&gt;
          &lt;div ng-show="show"&gt; Job &lt;/div&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
          &lt;a class="list-group-menu" href="#"&gt;&lt;div class="icon-login"&gt;&lt;/div&gt;
              &lt;div ng-show="show"&gt; Login &lt;/div&gt;
          &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
      &lt;a class="list-group-menu" href="#"&gt;&lt;div class="icon-register"&gt;&lt;/div&gt;&lt;/a&gt;
       &lt;div ng-show="show"&gt; Register &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>JQUERY CODE:</strong></p>
  
  <pre><code>$('ul li').mouseenter(function() {
  
     $(this).children('div').show();
  
  });
  
  $('ul li').mouseleave(function() {
  
     $(this).children('div').hide();
  
  });
  </code></pre>