Bootstrap navbar "flashing" when clicking outside of menu to close it
<p>I'm having an issue with the navbar where a "flash" appears when you click outside the menu to close the menu. The flash persists if the mouse is held down when clicking out of the menu as shown here:</p>

<p><img src="https://i.imgur.com/P75iTwU.gif"></p>

<p>I'm thinking it might have something to do with angular, and not css, mainly because others have failed to replicate it on fiddle. <a href="https://stackoverflow.com/questions/36139568/changing-color-of-clicked-navbar-dropdown-using-bootstrap">Previous question here.</a>  </p>

<p>HTML:</p>

<pre><code>&lt;nav class='navbar navbar-default.navbar-static-top navbar-custom'&gt;
  &lt;div class='container-fluid'&gt;
    &lt;ul class='nav navbar-nav navbar-left'&gt;
      &lt;li&gt;&lt;a href="dashboard.html"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/grades"&gt;Grades&lt;/a&gt;&lt;/li&gt; 
      &lt;li&gt;&lt;a href="/classes"&gt;Classes&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul class='nav navbar-nav navbar-right'&gt;
      &lt;li&gt;&lt;a href="/messages"&gt;&lt;i class="fa fa-envelope fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;

        &lt;!--has to do with the link, clicking it and clicking it again--&gt;
      &lt;li&gt;&lt;a class="dropdown-toggle dropdown-custom" data-toggle="dropdown" href="/profile"&gt;&lt;i class="fa fa-user fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;&lt;a href="/profile.html"&gt;Edit profile&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/settings"&gt;Edit Preferences&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="/logout"&gt;&lt;i class="fa fa-power-off fa-lg"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;    
    &lt;/ul&gt;

  &lt;/div&gt;
&lt;/nav&gt;
</code></pre>

<p>CSS:</p>

<pre><code>[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none !important;
}
.navbar-custom {
    background-color: #586F7C;
}
.navbar-custom a {
    color: #F4F4F9;
}
.navbar-custom .nav &gt; li &gt; a:hover {
    background-color: #2F4550;
}
.navbar .navbar-nav &gt; li.open &gt; a, {
    background-color: #586F7C;
}
.navbar .navbar-nav &gt; li.open &gt; a:hover,
.navbar .navbar-nav &gt; li.open &gt; a:focus {
    background-color: #2F4550;
}
.nav &gt;li &gt; a:hover, .nav &gt; li &gt; a:focus {
  background-color: #586F7C;
}
</code></pre>

<p>ng-include in the file the navbar is referenced in</p>

<pre><code>&lt;div ng-include="'html/navbar.html'"&gt;&lt;/div&gt;
</code></pre>

<p>portion of index.html where it references the file that the navbar is ng-included in</p>

<pre><code>&lt;body&gt;
 &lt;div class="view-container"&gt;
     &lt;div ng-view class="view-frame"&gt;&lt;/div&gt;
 &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>I'm thinking the issue might be with the ng-view or ng-include, however so far none of the fixes in the previous question worked. </p>