Help with custom Modal Template on Portal

[babarat1]

Hello All,

I have created a Modal Template on custom widget to open up a pop up message on load of the current page.

Also, I have other modals too just for info.

I came up with the below code, 

<script type="text/ng-template" id="modalTemplateStatus">
<div class="panel panel-default">
<div class="panel-heading">
	<h4 class="panel-title"><b>Here are the roles you can add/remove using this request:</b></h4>
</div>
<div class="panel-body wrapper-xl">
<form name="modalTemplateStatus">
<div class="form-group">
 <p><b>Authorized approvers:</b> Testt</p>
 
 <p><b> Authorized callers:</b> Test............ </p>
 
 <p><b>Watchlist:</b> Test.........</p>
 
 <p><b>Test.........</p>
 
</div>
<button type="button" class="btn btn-primary" style="color:white;" ng-click="c.closeModal()">Ok</button>
</form>
</div>
</div>
</script> 

Client Script

$window.onload = function () {
		OpenPopup();
	};

	function OpenPopup() {
		c.modalInstance = $uibModal.open({
			templateUrl: 'modalTemplateStatus',
			scope: $scope
		});
	}	

	c.closeModal = function() {
		c.modalInstance.close();
	}

however this is not working as expected every time when the page loads and I am not sure why. I am thinking because of other modals in place or it is not? I am unsure and need help on the same.

@jaheerhattiwale @Community Alums @Mark Roethof @Gunjan Kiratkar @Ankur Bawiskar 

Thanks

[johansec · Accepted solution]

//Client
api.controller=function($scope,$uibModal) {
  /* widget controller */
  var c = this;

		c.modalInstance = $uibModal.open({
			templateUrl: 'modalTemplateStatus',
			scope: $scope
		});

	c.closeModal = function() {
		c.modalInstance.close();
	};
};

HTML

<script type="text/ng-template" id="modalTemplateStatus">
<div class="panel panel-default">
<div class="panel-heading">
	<h4 class="panel-title"><b>Here are the roles you can add/remove using this request:</b></h4>
</div>
<div class="panel-body wrapper-xl">
<form name="modalTemplateStatus">
<div class="form-group">
 <p><b>Authorized approvers:</b> Testt</p>
 
 <p><b> Authorized callers:</b> Test............ </p>
 
 <p><b>Watchlist:</b> Test.........</p>
 
 <p><b>Test.........</p>
 
</div>
<button type="button" class="btn btn-primary" style="color:white;" ng-click="c.closeModal()">Ok</button>
</form>
</div>
</div>
</script>