How to use Popover inside a Angularjs function

Question

My problem is pretty weird and unique. I will do my best to explain my situation here.

I have a form validation. Once user fills form and selects add button, it allows to add for first 6 times. After 6th submission, the add button is disabled and user is not allowed to add any further.

Here is the add button function

$scope.addItem = function () {
    $scope.items.push($scope.activeItem);



    if ($scope.items.length > 6) {
        $scope.disableAdd = true
     // here is the code below where i want to insert my popover function.
    }
}

Can anyone please let me know how to insert a popover like this at run time. Please note: i dont want to show a popover straight away as the page loads and user selects the button. I want to show it only after User has submitted 6 forms. The number of times the user submitted is shown in $scope.items.length

I just want to display something back to the user that he cannot add any more. I tried using a modal but i thought popover would be much better. Any suggestions are welcome.....

Answer 1

There's a ton of ways to do this. If your popover exists statically in the dom, you could just trigger it with the same scope boolean you're using to disable the button with the ng-if directive:

<div class="popover" ng-if="disabledAdd">No more forms allowed<div/>