ng-transclude template load event, to include a script?

Question

Angular

Setting up the Angular-Wizard module ( https://github.com/mgonto/angular-wizard )
It includes directives. They are used to load the template.
I use the module to create a multi-step form. Everything works great.
But the only caveat. When the page is loaded, the wizard directives pull up their template. Since I'm using it to create forms, I need to include an input mask.

<form id="s_add_agent_form" class="uk-form-stacked">
  <wizard on-finish="finishedWizard()" template="app/templates/wizard.tpl.html">
    <wz-step title="1" template="app/templates/wizard.step.tpl.html">
      <label for="user_phone1">Телефон</label>
      <input data-inputmask="'mask': '[phone]'" data-inputmask-showmaskonhover="false" type="text" class="masked_input md-input" name="user_phone1" id="user_phone1" md-input ng-model="s_user_data.step1.user_phone1" />
    </wz-step>
    <wz-step title="2" template="app/templates/wizard.step.tpl.html">
      <label for="user_phone2">Доп. телефон</label>
      <input data-inputmask="'mask': '[phone]'" data-inputmask-showmaskonhover="false" type="text" class="masked_input md-input" name="user_phone2" id="user_phone2" md-input ng-model="s_user_data.step1.user_phone2" />
    </wz-step>
    <wz-step title="3" template="app/templates/wizard.step.tpl.html">
      <label for="user_phone3">Доп. телефон</label>
      <input data-inputmask="'mask': '[phone]'" data-inputmask-showmaskonhover="false" type="text" class="masked_input md-input" name="user_phone3" id="user_phone3" md-input ng-model="s_user_data.step1.user_phone2" />
    </wz-step>
  </wizard>
</form>

This is what the templates look like:
wizard.tpl.html

<div class="wizard">
    <div class="steps uk-clearfix">
        <ul ng-if="!hideIndicators" class="uk-clearfix">
            <li ng-class="{ default: !step.completed && !step.selected, current: step.selected && !step.completed, done: step.completed && !step.selected, editing: step.selected && step.completed, last: $last}" ng-repeat="step in getEnabledSteps()">
                <a ng-click="goTo(step)">
                    <span class="number">{{$index+1}}</span>
                    <span class="title">{{step.title || step.wzTitle}}</span>
                </a>
            </li>
        </ul>
    </div>
    <div class="content" ng-transclude></div>
</div>

wizard.step.tpl.html

<section ng-show="selected" ng-class="{current: selected, done: completed}" class="step body" ng-transclude>
</section>

Question:
At the time of controller initialization, there is no form content yet.
How can I access the content of loaded templates in the controller? To execute for example:

$maskedInput = $('.masked_input');
if($maskedInput.length) {
    $maskedInput.inputmask();
}

At the moment I solve this problem using $timeout:

$timeout(function(){
  $maskedInput = $('.masked_input');
  if($maskedInput.length) {
    $maskedInput.inputmask();
  }
}, 1);

But I understand that this is not correct. How to find the right way?

Answer 1

I need to include input mask.

we make it a directive, and everything is fine, angular will destroy everything. You should not have a desire to catch something in the DOM yourself. At least in 99% of cases.
Everything should be a directive.