Popover AngularJs quickly disappearing

The 'Thanks' popover worked fine on the first try, but it quickly disappears on the succeeding attempts.

I used uib-popover and set its template to a <div> with simple input text & button at first. Then on clicking Submit, I set again the template to a simple 'Thanks' <div>. It is showing fine on the first try, but it quickly disappears on the succeeding attempts.

Note that the 4 pairs of thumbs are rendered by ng-repeat and each action made on the items are isolated using index

Here is my full code in public repo

Quick view of the relevant codes:

Markup for the thumbs down:

<span class="feedback-separator">|</span>
<span
   uib-popover-template="this.templates[result.id]"
   popover-trigger="'outsideClick'"
   ng-class="{
         'feedback-down-unselected' : !this.feedbackIsBadCollection[result.id],
         'feedback-down-selected' : this.feedbackIsBadCollection[result.id],
         'no-hover' : this.feedbackUpTogglerList[result.id] || this.feedbackIsBadCollection[result.id] 
   }"                       
>
</span>

Popover template:

<div>
   <p>{{ this.subTitle }}</p>
   <input type="text" ng-model="reason" />
   <br />
   <button ng-click="this.submit(reason, result.id)">Submit</button>
</div>

Controller code:

$scope.submit = (reason, id) => {
    $scope.templates[id] = $sce.trustAsResourceUrl("thanks.html");
    $scope.sendFeedback(true, id, reason);
}

Solution 1:

We just need to add some delay of 50 milliseconds before switching to “thanks.html”. when you change the content popup js takes time to recalculate the position of the element as the content changes.

Add a $timeout before switching to thanks.html.

feedbackApp.controller('feedbackCtrl', function ($scope, $sce, $timeout) {

$timeout(function () {
            $scope.templates[id] = $sce.trustAsResourceUrl("thanks.html");
        }, 50);