title: Mobile menu toggle bug after changing Bootstrap's mobile nav break point
body: <p><strong><a href="http://leongaban.com/_work/portal/app/#/" rel="nofollow">http://leongaban.com/_work/portal/app/#/</a></strong></p>
  
  <p>I changed the mobile break for my <a href="http://getbootstrap.com/" rel="nofollow">bootstrap</a> app to 900 pixels instead of 768. I found the styles here: <a href="https://coderwall.com/p/wpjw4w" rel="nofollow">https://coderwall.com/p/wpjw4w</a></p>
  
  <p>The CSS works great, the navbar will change to the mobile version when you shrink the window down to 900 pixels, instead of waiting till 768. However there is a strange bug now. If you click on the toogle button.</p>
  
  <p>This HTML below:</p>
  
  <pre><code>&lt;div class="collapse navbar-collapse ng-scope" ng-controller="NavController as nav"&gt;
  </code></pre>
  
  <p>Changes to this for a split sec:</p>
  
  <pre><code>class="navbar-collapse ng-scope collapsing"
  </code></pre>
  
  <p>Then ends up as: </p>
  
  <pre><code>class="navbar-collapse ng-scope collapse in"
  </code></pre>
  
  <p>So the mobile menu gets shown for a split sec in the <code>collapsing</code> state, then goes away :(</p>
  
  <p>What needs to happen is that <code>collapse</code> needs to change to <code>collapsed</code>. If I change the class to <code>collapsed</code> in Chrome inspector then the mobile menu will be shown and not hidden.</p>
  
  <p>Any idea why changing the Bootstrap mobile break seems to be breaking in my project?
  I thought it had something to do with my Angular controller, but I removed that code and the mobile menu toggle is still broken.</p>
  
  <p>This technique works fine in this example here: <a href="http://www.bootply.com/105915" rel="nofollow">http://www.bootply.com/105915</a></p>