Closing uibModal automatically after array length equals zero - angularjs

Question

Our team is developing an attachment widget in ServiceNow. The widget allows a user to attach documents, view them, and delete them as necessary. In order to view the attachments, we're leveraging modal windows through uibModal. If a user deletes all of the attachments and the array length reaches zero, we want the modal window to close automatically, but we can't seem to get that working.
<label>
<sp-attachment-button></sp-attachment-button>
</label>
<span ng-if="attachments.length>0" class="badge" ng-click="c.openModal()">{{attachments.length}}</span>
<script type="text/ng-template" id="modalTemplate">
<div class="panel panel-default">
<div class="panel-heading flex">
<h4 class="panel-title">Attachments</h4>
<i type="button" class="fa fa-times" style="margin-left:auto;" ng-click="c.closeModal()"></i>
</div>
<div class="panel-body">
<now-attachments-list template="sp_attachment_single_line"></now-attachments-list>
</div>
<!--<div class="panel-footer text-right">
<button class="btn btn-primary" ng-click="c.closeModal()">${Close Modal}</button>
</div>-->
</div>
</script>
Our controller looks like this:
function ($uibModal, spModal, cabrillo, $scope, $http, spUtil, nowAttachmentHandler, $rootScope, $sanitize, $window, $sce) {
var c = this;
$scope.attachments=[];
$scope.m = $scope.data.msgs;
$scope.submitButtonMsg = $scope.m.submitMsg;
if(c.options.case_sysid){
$scope.data._attachmentGUID = c.options.case_sysid;
}
var ah = $scope.attachmentHandler = new nowAttachmentHandler(setAttachments, function() {});
ah.setParams('sn_hr_core_case_workforce_admin', $scope.data._attachmentGUID, 1024 * 1024 * 24);
function setAttachments(attachments, action) {
$scope.attachments = attachments;
}
$scope.attachmentHandler.getAttachmentList();
$scope.confirmDeleteAttachment = function(attachment) {
if (cabrillo.isNative()) {
if (confirm($scope.data.msgs.delete_attachment)) {
$scope.attachmentHandler.deleteAttachment(attachment);
}
} else {
spModal.confirm($scope.data.msgs.delete_attachment).then(function() {
$scope.attachmentHandler.deleteAttachment(attachment);
if($scope.attachments.length==0){
c.modalInstance.close();
}
});
}
}
c.openModal = function() {
c.modalInstance = $uibModal.open({
templateUrl: 'modalTemplate',
scope: $scope
});
}
c.closeModal = function() {
c.modalInstance.close();
}
console.log('custom-attachments');
console.log($scope);
}
Any suggestions on how to get the modal to close automatically?

Answer 1

We figured it out. We have to watch the array, then close the modal after array hits zero:
$scope.$watch(function () {
return $scope.attachments;
}, function (value) {
if(value.length==0){
if(c.modalInstance){
c.modalInstance.close();
}
}
});