I am encountering difficulties when trying to close the Modal in Angular JS
HTML
<div class="container">
<div class="col-md-12" id="gridSet">
<div class="gridStyle adjustViewPort" ng-grid="gridOptions"></div>
// This is the HTML template for MODAL.
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-body">
<p>No Events Found</p>
<p><button class="btn btn-primary" ng-click="myClickEvent()">OK</button></p>
</div>
</script>
</div>
</div>
And in controller.js, it appears as follows:
$scope.modalInstance=$modal.open({templateUrl: 'myModalContent.html'});
// This should work. However, 'Cancelled' is logged every time.
$scope.modalInstance.result.then(function() {
console.log('Success'); // This is never executed.
}, function() {
console.log('Cancelled');
})['finally'](function(){
$scope.modalInstance = undefined
});
I have attempted to hide the modal using this.$hide(); within the myClickEvent function, but it does not get called at all.
The code is taken from Plunker.
Seeking solutions to 1) Hide the modal after a few seconds using $timeout
2) Close the modal when the user selects OK.
UPDATE
An issue with the Plunker code is that it references $modalInstance as a dependency which I cannot inject.
The 'ng-click="myClickEvent()"' function calls a controller function as shown below:
$scope.myClickEvent=function(){
alert('the function is called.');
}
However, there is no alert displayed.
Thank you in advance for any assistance provided.