I am having trouble with a modal in a partial file that is supposed to be loaded into my main view using an ng-include tag. However, the template cannot be found and I do not see it being loaded in the console or network tab. The error message I receive is: Error: [$compile:tpload] Failed to load template: rxsignalUpdateModal.html
controller:
$scope.open = function (size) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: 'rxsignalUpdateModal.html',
controller: 'ModalInstanceCtrl',
size: size
});
};
view:
<div class="col-md-12 col-lg-12">
<div class="h4 invisible"></div>
<div class="rxsignal-chart-bubble" ui-view="rxsignal-chart-bubble"></div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<span class="text-muted panel-title">
{{ Drug.aedrug_name | pascalCaseFilter }} RxSignal
</span>
<button class="btn btn-info btn-mini restoreSortButton pull-right"
ng-click="clearLocalStorage()"
popover-append-to-body="true" popover-trigger="mouseenter"
popover-placement="top" popover="Reload grid with default sorting order">
Restore Default Settings
</button>
<span id="rxsignal-filter-view" ui-view="rxsignal-filter"></span>
</div>
<div class="gridStyle" ng-grid="drugRxsignal.options" id="portfolio-rxsignal-grid"></div>
</div>
</div>
</div>
</div>
<div ng-include="app/drug/partials/drug.rxsignal.update.modal.html"></div>
partial:
<!-- modal -->
<h1> test <h1>
<script type="text/ng-template" id="rxsignalUpdateModal.html">
<div class="modal-header">
<h3 class="modal-title letter-title">Modal Title</h3>
</div>
<div class="modal-body">
<div class="letter-body">
<p>text< p>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="cancel()">OK</button>
</div>
</script>
<!-- end modal -->