Why does an ionic modal freeze the user interface when it's closed or shipped?

Question

I have a popover in which there are two options -Add Favorite and Add Comment-, the first parameters work correctly: this will not slow down the user interface; but the second, when the form is omitted or submitted, freezes the interface. This is what happens:

Note how the interface does not respond when closing the form.

This is the code I used to create popover and modal:

$ionicPopover.fromTemplateUrl('templates/dish-detail-popover.html',{
scope: $scope}) 
.then(function(popover){
    $scope.popover = popover;
});

$scope.openPopover = function($event){
    $scope.popover.show($event);
}

$scope.closePopover = function() {
    $scope.popover.hide();
}; 

$ionicModal.fromTemplateUrl('templates/dish-comment.html', {
    scope: $scope
}).then(function(modal) {
    $scope.commentModal = modal;
});

// Triggered in the reserve modal to close it
$scope.closeAddComment = function() {
    $scope.commentModal.hide();
};

// Open the reserve modal
$scope.showCommentModal = function($event) {
    $scope.closePopover();
    $scope.commentModal.show($event);
};

Template for dish-detail-popover.html:

<ion-popover-view>
    <ion-content>
      <div class="list">
        <a class="item" ng-click="addFavorite(dish.id)">
          Add to favorites
        </a>
        <a class="item" ng-click="showCommentModal()">
          Add Comment
        </a>
      </div>
    </ion-content>
</ion-popover-view>

and template for dish-comment.html:

<ion-modal-view>
  <ion-header-bar>
    <h1 class="title">Submit Comment on Dish</h1>
    <div class="buttons">
      <button class="button button-clear" ng-click="closeAddComment()">Close</button>
    </div>
  </ion-header-bar>
  <ion-content>
    <form id="comentDishForm" name="comentDishForm" ng-submit="doComment()">
      <div class="list">
        <label class="item item-input item-select">
          <span class="input-label">Rating</span>
            <select ng-model="comment.rating">
                <option ng-repeat="n in [1,2,3,4,5]" value="{{n}}">{{n}}</option>
            </select>
        </label>
        <label class="item item-input">
          <span class="input-label">Your Name</span>
          <input type="text" ng-model="comment.author">
        </label>
        <label class="item item-input">
          <span class="input-label">Your Comment</span>
          <input type="text" ng-model="comment.comment">
        </label>
        <label class="item">
          <button class="button button-block button-positive" type="submit">Submit</button>
        </label>
      </div>
    </form>
  </ion-content>
</ion-modal-view>

NOTE . When a form is called from the Add Comment button (green), it works correctly. The error is due to a call from popover.

Some suggestions or ideas ... to solve this problem?

Answer 1

, , popover , body "popover-open". , , , popover . , "popover-open" . :

$scope.$on('modal.hidden', function() {
    $scope.closePopover();
});

, .

Answer 2

, . Ionic docs ionicPopover, , .hide() , , popover . , , closePopover() :

$scope.closePopover = function () {
    return $scope.popover.hide();
};

, , - " ", :

$scope.addComment = function addComment() {
    $scope.closePopover()
      .then(function() {
        $scope.openAddCommentModal();
      });
};

, popover, body. .