Angular UI Bootstrap Popover - How to close an popover with ESC

Question

I searched the questions and answers, tried different approaches (e.g. $('#element').popover('hide')) and I am still unable to close a Bootstrap popover with ESC button.

I would (falsely) assume this should work

$(document).keyup(function (event) {
    if (event.which === 27) {
      alert( "esc");
      $scope.isOpen = false;
    }
});

, but it is not.

I prepared a plunker.

Thanks a lot!

Answer 1

As Aran said, this is related to the digest cycle issue as the change is not detected by angular.

Here is a working plunker: http://plnkr.co/edit/M3F7dmmLBrtGdBCICdLm?p=preview

Make sure to use $scope.$digest as it will automatically enforce $apply

$scope.save = function () {
  $scope.isOpen = false;
  $scope.$digest();
};

$(document).keyup(function (event) {
    if (event.which === 27) {
      $scope.save();
    }
});