Modal won't close


The modal opens fine, but will not close. Any ideas?


$scope.rightButtons = [{
    type: 'button-icon icon ion-navicon',
    tap: function(e) {

$ionicModal.fromTemplateUrl('templates/modal.html', function(modal) {
    $scope.modal = modal;
    animation: 'slide-in-up'

$scope.openModal = function() {
$scope.closeModal = function() {

Main Template:

<ion-view title="'Stuff'" left-buttons="leftButtons" right-buttons="rightButtons">
  <ion-content has-header="true" has-tabs="true">

Modal Template:

<div class="modal">
<header class="bar bar-header bar-positive">
    <h1 class="title">Modal</h1>
<ion-content has-header="true" padding="true">
    <button class="button button-positive" ng-click="closeModal()">Close</button>


All seems okay. Can you put a console.log in that closeModal method and see if it is firing?

Can you post a demo?


I tried that and it doesn’t fire.


Try posting a CodePen sample. I don’t see anything wrong off the top of my head.

See this as a starting point:


Does the templates/modal.html need it’s own controller? I’m still getting nothing on ng-click.


No, it doesn’t need it’s own controller - but it can have one. The controller for the modal (unless a child controller is added) is the controller that instantiated the modal.

Did you see anything in the sample I linked that helps you? Can you post your own?


Here is part of it:

Yours worked but all the html was in one file, where as I’m using several files.


Found the issue. I didn’t have scope: $scope, in the $ionicModal.fromTemplateUrl function. Seems to be working now.