title: Unable to display dropdown and popover AngularJS
body: <p>I am new to this, can you help me figure out why my dropdown is not displaying properly and also the popover of the second value of dropdown is not working properly?
  I am a bit confuse since it is my first time trying this.
  Here is my code</p>
  
  <pre><code>&lt;ul class="nav site-nav"&gt;
  &lt;li class=flyout&gt;
      &lt;a href=#&gt;Menu&lt;/a&gt;
  
  &lt;!-- Flyout --&gt;
  &lt;ul class="flyout-content nav stacked"&gt;
    &lt;li&gt;
      &lt;div ng-app&gt;
        &lt;div ng-controller="popoverCtrl"&gt;
          &lt;a href="#" ng-mouseover="showPopover=true;" ng-mouseleave="showPopover=false;"&gt;Real Account &lt;div class="popover" ng-show="showPopover"&gt;&lt;span&gt;{{ popover.title }}&lt;/span&gt;{{ popover.message }}&lt;/div&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;div ng-app&gt;
        &lt;div ng-controller="popoverCtrl2"&gt;
          &lt;a href="#" ng-mouseover="showPopover2=true;" ng-mouseleave="showPopover2=false;"&gt;Practice Account &lt;div class="popover2" ng-show="showPopover2"&gt;&lt;span&gt;{{ popover2.title }}&lt;/span&gt;{{ popover2.message }}&lt;/div&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/li&gt;
  
  
  &lt;/ul&gt;
  </code></pre>
  
  <p></li>
  </p>
  
  <p>and my JS</p>
  
  <pre><code>function popoverCtrl($scope) {
  
    $scope.showPopover = false;
  
    $scope.popover = {
      title: 'Title',
      message: 'Message'
    };
  
  }
  
  function popoverCtrl2($scope2) {
  
    $scope2.showPopover2 = false;
  
    $scope2.popover2 = {
      title: 'Test',
      message: 'Sample'
    };
  }
  </code></pre>
  
  <p><strong>Here is what I have done so far <a href="http://jsfiddle.net/fn1aj1e6/" rel="nofollow noreferrer">http://jsfiddle.net/fn1aj1e6/</a></strong></p>