Using script tag with id as angularstrap popover template

Question

I have a form with a password validation script in angular. I'm trying to get a popover to appear when the password field has focus. I'd like the template to be a div that changes based on the results of the validation script. I've never really used script tags as microtemplates before.

I've made a div (that works when not inside the script tags) that looks like this:

<script type="text/html" id="passwordValidate">
            <div>
                Passwords must meet the following criteria:
                <ul class="fa-ul">
                    <li><i class="fa-li fa" ng-class="{'fa-times text-danger':(userForm.password.$error.minimum && userForm.password.$dirty), 'fa-check text-success':(!userForm.password.$error.minimum && userForm.password.$dirty)}"></i> At least 8 characters</li>
                    <li><i class="fa-li fa" ng-class="{'fa-times text-danger':(userForm.password.$error.lowerCase && userForm.password.$dirty), 'fa-check text-success':(!userForm.password.$error.lowerCase && userForm.password.$dirty)}"></i> At least 1 lower case character</li>
                    <li><i class="fa-li fa" ng-class="{'fa-times text-danger':(userForm.password.$error.upperCase && userForm.password.$dirty), 'fa-check text-success':(!userForm.password.$error.upperCase && userForm.password.$dirty)}"></i> At least 1 upper chase character</li>
                    <li><i class="fa-li fa" ng-class="{'fa-times text-danger':(userForm.password.$error.number && userForm.password.$dirty), 'fa-check text-success':(!userForm.password.$error.number && userForm.password.$dirty)}"></i> At least 1 number</li>
                    <li><i class="fa-li fa" ng-class="{'fa-times text-danger':(userForm.password.$error.symbol && userForm.password.$dirty), 'fa-check text-success':(!userForm.password.$error.symbol && userForm.password.$dirty)}"></i> At least 1 symbol</li>
                </ul>
            </div>
</script>

and my password field has the following markup:

 <input 
    class="form-control input-sm" 
    ng-model="user.password" 
    type="password" 
    name="password" 
    id="password" 
    ng-change="passwordValidate()" 
    placeholder="Password" 
    data-placement="bottom" 
    data-trigger="focus" 
    data-content="test" 
    data-template="passwordValidate" 
    bs-popover
    required
     />

if I remove the data-template attribute the popover works. If I leave it in, nothing happens (in plnkr)...I get an error:

TypeError: cannot call method 'insertBefore' of null

and then:

Uncaught TypeError: Cannot set property 'top' of undefined

Is this how I'm supposed to use templates?

here's my plnkr: http://plnkr.co/edit/j1mrX2RrbDGk6xHSvmXU?p=preview

Answer 1

I ended up putting the HTML in an actual separate file and reference it as a template. It worked and it kept the local scope, so my validator worked.

(also, gotta make sure to use the bootstrap mark up for popovers)

here's the fixed plnkr: http://plnkr.co/edit/j1mrX2RrbDGk6xHSvmXU?p=preview