How to show form input errors using AngularJS UI Bootstrap tooltip?

Question

For example I have the form where I am showing form input errors.

I need to show red badge (with \'hover to show errors\') near input label if there are some errors.

Answer 1

My goal was to leverage both ng-messages and ui-bootstrap popover for validation feedback. I prefer the popover vs. the tooltip as it displays the help-block styles more clearly.

Here's the code:

    Routing #
    

        
    
                
    
    

Here is the validationMessages.html

Required
Too high
Too low
Too short
Too long
Invalid email

Note: I had to upgrade to jQuery 2.1.4 to get the uib-popover-template directive to work.

Dependencies:

• string-to-number
• UI Bootstrap
• ng-messages