AngularJs UI Bootstrap dropdown position is miscalculated while adding ngif for dropdown-menu

Question

AngularJs UI Bootstrap is miscalculating position of dropdown while adding ng-if condition for ui element holding 'dropdown-menu' class.

AngularJs UI Bootstrap version - 0.3.13 AngularJs version - 1.3.17

This is a plunker where issue is regenerated - http://next.plnkr.co/edit/sSXH5KeMQymaFNpG

<div class="btn-group" dropdown dropdown-append-to-body>
  <button id="btn-append-to-body" type="button" class="btn btn-primary" dropdown-toggle>
     Dropdown on Body <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" ng-if="myFlag" role="menu" aria-labelledby="btn-append-to-body"></ul>
</div>

Expecting some solution from ui-bootstrap

Answer 1

ng-if will create an isolated child scope and it removes the element from the DOM when the condition is false and only adds the element back once the condition turns true, while ng-show just toggle the appearance of the element by adding the CSS display: none style.

You can use ng-show instead:

<ul class="dropdown-menu" ng-show="myFlag" role="menu" aria-labelledby="btn-append-to-body">
      <li role="menuitem"><a href="#">Action</a></li>
      <li role="menuitem"><a href="#">Another action</a></li>
      <li role="menuitem"><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li role="menuitem"><a href="#">Separated link</a></li>
    </ul>