Popover Bug #6221

<!DOCTYPE html>
<html>

<head>
<script data-require="jquery@3.1.0" data-semver="3.1.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script data-require="ui-bootstrap@2.1.3" data-semver="2.1.3"
    src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.1.3/ui-bootstrap-tpls.js"></script>
<link data-require="bootstrap-css@3.3.7" data-semver="3.3.7" rel="stylesheet"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script src="resize.js"></script>
<script src="script.js"></script>
</head>

<body ng-app="validationApp" ng-controller="mainController as ctrl">
    <a target="_blank" href="https://github.com/angular-ui/bootstrap/issues/6221">Github</a>
    <div dir-resize>
        <div>
        {{ctrl.message}}
        </div>
        
        <div ng-if="ctrl.visible">
          <button uib-date popover-title="Title" type="button" class="btn btn-default"
            popover-is-open="ctrl.open" uib-popover-template="'popover.html'" popover-placement="bottom">Popover</button>
            <!--
            <input type="text" name="yo" uib-datepicker-popup="YYYY-MM-DD"
                ng-model="ctrl.date" is-open="ctrl.open" max-mode="day"/>
            -->
        </div>
    </div>
</body>
</html>

// Code goes here

// create angular app
var validationApp = angular.module('validationApp', ['ui.bootstrap']);

// create angular controller
validationApp.controller('mainController', ['$scope', '$q', function($scope, $q) {
  
  this.date = new Date();
  this.open = true;
  this.visible = true;
  this.message = "Resize the window below 400px to make the popop disapear"
  
  var _this = this;
  $scope.$on("RESIZE", function(event, params) {
      _this.visible = params.width >= 400;
      _this.message = "Width : " + params.width;
  });
}]); 

validationApp.directive(NAME_DIRECTIVE_RESIZE, FACTORY_DIRECTIVE_RESIZE);

/* Styles go here */

body { padding-top:30px; }

.working {
  color: blue;
  font-weight: 600;
}

.bugs {
  color: red;
  font-weight: 600;
}

.fixed {
  color: lightgreen;
  background-color: grey;
  font-weight: 600;
}

NAME_DIRECTIVE_RESIZE = "dirResize";
FACTORY_DIRECTIVE_RESIZE = ["$rootScope", "$window", "$timeout", function ($rootScope, $window, $timeout) {
  return new DirectiveResize($rootScope, $window, $timeout);
}];

var DirectiveResize = (function () {
    function DirectiveResize($rootScope, $window, $timeout) {
        var _this = this;
        this.$rootScope = $rootScope;
        this.$window = $window;
        this.$timeout = $timeout;
        this.restrict = "A";

        this.detectionDelay = 300;
        
        this.link = function (scope, element, attributes, controller) {
            return _this.initialiserDirective(scope, element, attributes, controller);
        };
    }
    DirectiveResize.prototype.initialiserDirective = function (scope, element, attributes, controller) {
        var _this = this;
        if (attributes[NAME_DIRECTIVE_RESIZE] && !isNaN(attributes[NAME_DIRECTIVE_RESIZE])) {
            this.detectionDelay = attributes[NAME_DIRECTIVE_RESIZE];
        }
        this.$window.addEventListener('resize', function (event) { return _this.onWindowResize(event); });
    };
    DirectiveResize.prototype.onWindowResize = function (e) {
        var _this = this;
        if (this.resizing) {
            return;
        }
        this.resizing = this.$timeout(function () { return _this.notifyResize(); }, this.delaiDetection);
    };
    DirectiveResize.prototype.notifyResize = function () {
        var _this = this;
        this.resizing = null;
        var width = this.$window.innerWidth;
        var height = this.$window.innerHeight;
        return _this.$rootScope.$broadcast("RESIZE", {width, height});
        //this.$rootScope.$evalAsync(function () { 
        //});
    };
    return DirectiveResize;
}());


<div>
Popover template content
</div>