title: Good way to dynamically open / close a popover (or tooltip) using angular, based on expression?
body: <p>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:</p>
  
  <pre><code>&lt;span ng-show="t3.f.needsAttention(f.fieldName)" ng-cloak&gt;
      &lt;span ng-show="f.fieldName.$error.required &amp;&amp; !f.fieldName.$viewValue"&gt;
          This field is required.
      &lt;/span&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>.. where <code>f</code> is the form, and <code>t3</code> comes from a custom directive on the form which detects whether a submission was attempted, and contains functions for checking the validity of fields.</p>
  
  <p>What I am trying to accomplish is to display validation message(s) inside a popover instead. Either bootstrap's native popover, or the popover from <a href="http://angular-ui.github.io/bootstrap/">UI Bootstrap</a>, I have both loaded. I may also consider AngularStrap if it is easier to do it using that lib.</p>
  
  <p>What I'm struggling with right now is the nature of popovers in general -- they autodisplay based on user events like click, mouseenter, blur, etc. What I want to do is show &amp; hide the popover(s) based on the same functions in the ng-show attributes above. So that when the expression returns false hide it, and when it returns true, show it.</p>
  
  <p>I know bootstrap has the .popover('show') for this, but I'm not supposed to tell angular anything about the dom, so I'm not sure how I would get access to $(element).popover() if doing this in a custom form controller function. Am I missing something?</p>
  
  <p><strong>Update</strong></p>
  
  <p>The solution mentioned in the duplicate vote still only shows the popover on mouseenter. I want to force it to display, as if doing <code>$('#popover_id').popover('show')</code>.</p>