angular UI multiple popovers, close single programatically after submit

Question

I am trying to programmatically close open popover based on index after submit is done.

html on a page:

<a role="button" uib-popover-template="dynamicPopover.templateUrl" 
   popover-is-open="isPopoverOpen[$index]" ng-click="openPopover($index)>                 
open popover
</a>

popover template:

<input ng-model="input.value">
<button class="btn" ng-click="saveValue()">submit</button>

controller:

$scope.openPopover = openPopover;
$scope.saveValue = saveValue;

$scope.dynamicPopover = {
    templateUrl: 'templates/test_popup.html'
};

function openPopover(index){
    $scope.isPopoverOpen[index] = true;
    $scope.popIndex = index;
}

function saveValue(index){

    var data = {
        value: $scope.input.value
    }

    $http.post('url', data)
        .then(function (res) {

           $scope.isPopoverOpen[$scope.popIndex] = false;

        }, function (err) {

        });

    }
}

all of this works except closing popover when ajax is done, so is this even possible ?

Answer 1

You can save index and use it in your saveValue function

JS:

$scope.openPopover(index){
    $scope.isPopoverOpen[index] = true;
    $scope.selectedIndex = index;
}

 $scope.saveValue=function(){

        var data = {
            value: $scope.input.value
        }

        $http.post('url', data)
            .then(function (res) {

               $scope.isPopoverOpen[$scope.selectedIndex ] = false;

            }, function (err) {

            });

        }
    }