title: UI-Bootsrap dropdown stop working with adding ng-if on the drop-down content
body: <p>I'm using ui-boostrap dropdown directive, and want to add my own ng-if to prevent showing it on some cases.
  When adding this ng-if, even when it always returns "true" - the dropdown stop working (doesn't pop up). It seems the drop-down button stops receiving ng-click events (therefore not changing the isOpen state..).</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;!doctype html&gt;
  &lt;html ng-app="ui.bootstrap.demo"&gt;
    &lt;head&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.2.js"&gt;&lt;/script&gt;
      &lt;script src="example.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;div ng-controller="DropdownCtrl"&gt;
  
  
      &lt;!-- Single button --&gt;
  
      &lt;div class="btn-group" uib-dropdown is-open="status.isopen"&gt;
  
      &lt;!-- When putting this ng-if, the drop down stops working --&gt;
        &lt;div ng-if="isAllowed()"&gt;
  
          &lt;button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled"&gt;
            Button dropdown &lt;span class="caret"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button"&gt;
            &lt;li role="menuitem"&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
            &lt;li role="menuitem"&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
            &lt;li role="menuitem"&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
            &lt;li class="divider"&gt;&lt;/li&gt;
            &lt;li role="menuitem"&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;script type="text/ng-template" id="dropdown.html"&gt;
          &lt;ul class="uib-dropdown-menu" role="menu" aria-labelledby="button-template-url"&gt;
            &lt;li role="menuitem"&gt;&lt;a href="#"&gt;Action in Template&lt;/a&gt;&lt;/li&gt;
            &lt;li role="menuitem"&gt;&lt;a href="#"&gt;Another action in Template&lt;/a&gt;&lt;/li&gt;
            &lt;li role="menuitem"&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
            &lt;li class="divider"&gt;&lt;/li&gt;
            &lt;li role="menuitem"&gt;&lt;a href="#"&gt;Separated link in Template&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/script&gt;
  &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
  angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
    $scope.items = [
      'The first choice!',
      'And another choice for you.',
      'but wait! A third!'
    ];
  
    $scope.status = {
      isopen: false
    };
  
    $scope.toggled = function(open) {
      $log.log('Dropdown is now: ', open);
    };
  
    $scope.toggleDropdown = function($event) {
      $event.preventDefault();
      $event.stopPropagation();
      $scope.status.isopen = !$scope.status.isopen;
      console.log('isOpen = ' + $scope.status.isopen);
    };
  
    $scope.isAllowed = function() {
      return true;
    }
  });
  </code></pre>
  
  <p>Here is a plunker reproduce the problem:
  <a href="http://plnkr.co/edit/8K9MUsDfFcjyiZvFdv5x?p=preview" rel="nofollow">http://plnkr.co/edit/8K9MUsDfFcjyiZvFdv5x?p=preview</a></p>
  
  <p>Any ideas?</p>