title: Doing jquery things angular way
body: <p>I'm building a sidenavigation bar for my dashboard and in the process of building it, found a good tutorial which has built something similar. I'm planning to use this as a base work and will customise it afterwards. In the tutorial, the dynamic things have been handled using Jquery. Since I'm using Angularjs for my development, I want to do it Angular way. Can anyone please explain me how can I accomplish it.</p>
  
  <p>Following is the <a href="http://seegatesite.com/create-simple-cool-sidebar-menu-with-bootstrap-3/" rel="nofollow">link</a> to tutorial.</p>
  
  <p><strong>Code snippets:</strong></p>
  
  <pre><code>$("#menu-toggle").click(function(e) {
          e.preventDefault();
          $("#wrapper").toggleClass("toggled");
      });
       $("#menu-toggle-2").click(function(e) {
          e.preventDefault();
          $("#wrapper").toggleClass("toggled-2");
          $('#menu ul').hide();
      });
  
       function initMenu() {
        $('#menu ul').hide();
        $('#menu ul').children('.current').parent().show();
        //$('#menu ul:first').show();
        $('#menu li a').click(
          function() {
            var checkElement = $(this).next();
            if((checkElement.is('ul')) &amp;&amp; (checkElement.is(':visible'))) {
              return false;
              }
            if((checkElement.is('ul')) &amp;&amp; (!checkElement.is(':visible'))) {
              $('#menu ul:visible').slideUp('normal');
              checkElement.slideDown('normal');
              return false;
              }
            }
          );
        }
      $(document).ready(function() {initMenu();});
  </code></pre>
  
  <p>How can I convert it to do line Angular way ?</p>
  
  <p>Thanks</p>