Good way to dynamically open / close a popover (or tooltip) using angular, based on expression?

Question

I have a form that is wired into angular, using it for validation. I am able to display error messages using ng-show directives like so:

Answer 1

My approach:

• Track the state of the popover in the model
• Change this state per element using the appropriate directives.

The idea being to leave the DOM manipulation to the directives.

I have put together a fiddle that I hope gives a better explain, but you'll find much more sophisticated solutions in UI Bootstrap which you mentioned.

jsfiddle

Markup:

    
    
Popover

    

        {{ element.name }}
    

JS:

function DemoCtrl($scope)
{

    $scope.elements = [
        {name: 'Element1 (Error)', error: true, hovered: false},
        {name: 'Element2 (no error)', error: false, hovered: false},
        {name: 'Element3 (Error)', error: true, hovered: false},
        {name: 'Element4 (no error)', error: false, hovered: false},
        {name: 'Element5 (Error)', error: true, hovered: false},
    ];

    $scope.popoverShow = function(element)
    {
        element.hovered = true;
    }

    $scope.popoverHide = function(element)
    {
        element.hovered = false
    }

}