AngularJS applying jquery after ng-include html template

Question

I am using a plugin called jquery masked input. http://digitalbush.com/projects/masked-input-plugin/ Which is being used to mask cell phone and ssn as follows:

<script type="text/javascript">
    $('.mask-ssn').mask('999-99-9999');
    $('.mask-phone').mask("(999) 999-9999");
</script>

I have an angular app, which is loading the form via ng-include

<div class="myForm" data-ng-include="'/templates/_form.html'"></div>

And the simplified contents of _form.html as follows:

<div class="form-group">
    <input 
        class="form-control mask-phone" 
        type="text" 
        placeholder="Cell Phone" 
        name="cell_phone" 
        required 
        data-ng-pattern="user.phone_number_regex"
        data-ng-model="user.formData.cell_phone"/>
    <div class="help-block">...</div>
</div>

If I just pasted the _form.html contents in the parent page, all would work fine and the jquery masked input is applied to the html.

Unfortunately, becaues _form.html is being loaded asynchronously now, the jquery masked input plugin doesn't work.

Looking for some advice on the *best practice / opinionated * way to apply the mask to the html. Don't know whether to go down the route of injecting $scope into my angular controller then using $scope.apply. Or by creating a directive / or alternative solution?

Answer 1

This is because of ng-include that create a new child scope. You can try to add $parent like this:

<div class="form-group">
    <input 
        class="form-control mask-phone" 
        type="text" 
        placeholder="Cell Phone" 
        name="cell_phone" 
        required 
        data-ng-pattern="$parent.user.phone_number_regex" //add $parent.
        data-ng-model="$parent.user.formData.cell_phone"/> // the same here.
    <div class="help-block">...</div>
</div>

Answer 2

Problem solved by wrapping jquery masked input inside a directive

app.directive('mask', function(){
    return {
        restrict: 'A',
        link: function (scope, elem, attr, ctrl) {

            if (attr.mask)
                elem.mask(attr.mask, { placeholder: attr.maskPlaceholder });
        }
    };
});

Then on the html elements for SSN and cell

<input class="form-control" data-mask="(999) 999-9999" type="text".../>
<input class="form-control" data-mask="999-99-9999" type="text".../>

Any better solutions out there?