How to close uib-Popover by clicking out?

Question

I’m trying to utilize the uibPopover Angular UI Bootstrap to display a field input.

The problem I’m having is that by clicking outside the Popover, it’s not closing.

I’ve already looked for some answers on SOEN that says I have to define the attribute popover-triggeras outsideClick or focus. I tried both ways, but I still haven’t achieved the expected result.

The code of the button that activates the Popover is like this:

<button  
    uib-popover-template="'popover-itens-protocolo.html'" 
    popover-placement="top-right" 
    popover-title="Nova Coluna" 
    popover-trigger="focus"
    type="button" 
    class="btn btn-primary">
    <i class="fa fa-plus-square"></i>
</button>


<script type="text/ng-template" id="popover-itens-protocolo.html">
    <form>
        <div class="input-group">
            <input type="text" ng-model="novaColuna" class="form-control" />
            <div class="input-group-btn">
                <button ng-disabled="!novaColuna" class="btn btn-primary" ng-click="adicionarNovaColuna(novaColuna)">
                    <i class="fa fa-plus"></i>
                </button>
            </div>
        </div>
    </form>
</script>

What is the solution to this problem?

Updating: All the examples I tested with clickOutside worked perfectly, but mine doesn’t work. I don’t know if the fact that the template is being uploaded externally can influence the fact, but this is how I’m doing it.

Answer 1

Searching Github back and forth, I discovered that it is an update problem.

It was reported in one of the Issue, that this had been removed from version 1.3.3.

However, when reading another issue, it was reported that in the newer versions of Angular UI Bootstrap, instead of using popover-trigger="outsideClick" should be used popover-trigger="'outsideClick'".

The issue I read this is that