$uibModal not loading correct content on first click

Question

I'm working in ServiceNow and am trying to use $uibModal to open up a modal window that holds an embedded widget. The modal opens fine on the first click, but every click after that requires two clicks for the modal to load the correct content. I've read on a few sites that it's because of the template cache doesn't clear and some people suggested not using the script tags, but I'm not sure how to get uibModal to work without the script tags in ServiceNow. Has anyone run into this? Would love to get some suggestions on how to fix this.

Here's my client script:

c.onWidget2 = function(template, task) {
    c.taskName = task.short_description;
    c.modalInstance = $uibModal.open({
        templateUrl: template,
        scope: $scope,
        size: 'lg'
    });
    spUtil.get('hrj_task_activity_scoped', {
        sys_id: task.sys_id,
        table: 'sn_hr_core_task',
        recordInfo: task.taskInfo
    }).then(function(response) {
        c.newTask2 = response;
    });
};

//closeModal for the "x" 
c.closeModal = function() {
    c.modalInstance.close();
};

And here's my HTML:

<div class="card" ng-click="c.onWidget2('newTask2',task);"></div>

<script>
    <div class="panel panel-default">
        <div class="panel-heading clearfix">
            <h4 class="panel-title pull-left">{{c.taskName}}</h4>
      <span ng-click="c.closeModal()"><i class="fa fa-times pull-right"></i></span>
    </div>
        <sp-widget widget="c.newTask2" options="c.newTaskOptions"></sp-widget>
  </div>
</script>

Answer 1

problem here is "directive in modal", like in this thread:

Integrating directive in Angular UI Modal

The solution would be to load the directive after the modal is rendered:

c.onWidget2 = function(template, task) {
    c.taskName = task.short_description;

    var initWidget =  spUtil.get('hrj_task_activity_scoped', {
        sys_id: task.sys_id,
        table: 'sn_hr_core_task',
        recordInfo: task.taskInfo
    }).then(function(response) {
        c.newTask2 = response;
    });

    c.modalInstance = $uibModal.open({
        templateUrl: template,
        scope: $scope,
        size: 'lg'
    }).rendered.then(initWidget);
};

//closeModal for the "x" 
c.closeModal = function() {
    c.modalInstance.close();
};