Angular ui-bootstrap - Can't get modal to close - angularjs

Question

I need help closing a modal. The modal is using ui-bootstrap plugin. I see in the documentation (http://angular-ui.github.io/bootstrap/) that they used two controllers for the modal. I would like to be able to close the modal with one controller.
Here is my modal template:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">{{modalTitle}}</h4>
</div>
<div class="modal-body">
<drilldown table-data="drilldownData"></drilldown>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
</div>
And here is the controller that the modal is used on:
var ChartController = function($rootScope, $scope, $modal) {
$scope.openModal = function (plotData) {
var unixtime_to_date = new Date(plotData); //convert from milliseconds to seconds
var modalInstance = $modal.open({
size: 'lg',
controller: function($scope) {
$scope.modalTitle = "Drilldown Chart";
$scope.modalBody = plotData;
$scope.drilldownData = {
daycount: $rootScope.diffDays,
dashboardreportid: 1,
companyid: $rootScope.companyid,
companybrandid: $rootScope.brandid,
startdate: unixtime_to_date,
enddate: unixtime_to_date,
clientdb: $rootScope.clientdb,
calltype: "Secondary"
}
},
templateUrl: 'modals/chartModal.html'
});
};
};
I'm very confused on how to close the modal when clicking the close button or 'x' button. Thanks for the help!

Answer 1

In modalInstance controller add function cancel
var ChartController = function($rootScope, $scope, $modal) {
$scope.openModal = function (plotData) {
var unixtime_to_date = new Date(plotData); //convert from milliseconds to seconds
var modalInstance = $modal.open({
size: 'lg',
controller: function($scope) {
//function to close modal
$scope.cancel = function() {
modalInstance.dismiss('cancel');
};
$scope.modalTitle = "Drilldown Chart";
$scope.modalBody = plotData;
$scope.drilldownData = {
daycount: $rootScope.diffDays,
dashboardreportid: 1,
companyid: $rootScope.companyid,
companybrandid: $rootScope.brandid,
startdate: unixtime_to_date,
enddate: unixtime_to_date,
clientdb: $rootScope.clientdb,
calltype: "Secondary"
}
},
templateUrl: 'modals/chartModal.html'
});
};
};
HTML
Add ng-click="cancel()" to button type="button"...
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
ng-click="cancel()" aria-hidden="true">×</button>
<h4 class="modal-title">{{modalTitle}}</h4>
</div>
<div class="modal-body">
<drilldown table-data="drilldownData"></drilldown>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
</div>

Answer 2

add this on your controller
var ChartController = function($rootScope, $scope, $modal,$modalInstance) {
$scope.openModal = function (plotData) {
var unixtime_to_date = new Date(plotData); //convert from milliseconds to seconds
var modalInstance = $modal.open({
size: 'lg',
controller: function($scope) {
$scope.modalTitle = "Drilldown Chart";
$scope.modalBody = plotData;
$scope.drilldownData = {
daycount: $rootScope.diffDays,
dashboardreportid: 1,
companyid: $rootScope.companyid,
companybrandid: $rootScope.brandid,
startdate: unixtime_to_date,
enddate: unixtime_to_date,
clientdb: $rootScope.clientdb,
calltype: "Secondary"
}
},
templateUrl: 'modals/chartModal.html'
});
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
and view will be like this
<button type="button" class="btn btn-default pull-right" ng-click="cancel()" data-ismiss="modal">Close</button>
I hope it should work

Answer 3

ng-click="$dismiss()" is all you need and close button markup can be as below
<button ng-click="$dismiss()" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>