title: How to Angularize Mobile menu with ng-show & ng-click?
body: <p><a href="http://plnkr.co/edit/F8K66L?p=preview" rel="nofollow">http://plnkr.co/edit/F8K66L?p=preview</a></p>
  
  <p>I have a <code>li</code> menu which at <code>300px</code> goes to <code>display:none</code>, while the <code>mobile_nav</code> button turns on.</p>
  
  <p>Now currently in my Controller I'm using this</p>
  
  <p><strong>main.js</strong></p>
  
  <pre><code>$scope.mobileMenu = function() {
    var menu = document.getElementById('main_nav');
  
    if (menu.style.display == 'block') {
        menu.style.display = 'none';
    } else {
        menu.style.display = 'block';
    }
  };
  </code></pre>
  
  <p>If I open the mobile menu, then close it, it stays closed on a larger view when resized, even though I have <code>display:block</code> in the CSS. Also need the mobile menu to close if an item is clicked inside of it.</p>
  
  <p>Tried this, but without any luck</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;div
    ng-click="isMobileNavOpen = !isMobileNavOpen"
    class="mobile_nav"&gt;
    =
  &lt;/div&gt;
  
  &lt;nav id="main_nav" ng-init="isMobileNavOpen = true" ng-show="isMobileNavOpen"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a ui-sref="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a ui-sref="about"&gt;About&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>// the button
  .mobile_nav {
    display: none;
  }
  
  @media all and (max-width: 300px) {
    .mobile_nav {
      display: block;
    }      
  
    #main_nav {
      display: none;
    }
  
    #main_nav li {
      float: none;
      margin-bottom 20px;
    }
  
    #main_nav a {
      width: 100%;
    }
  }
  </code></pre>