# Modal won't close

**URL:** <https://forum.ionicframework.com/t/modal-wont-close/1769>\
**Category:** ionic-v1\
**Created:** [March 11, 2014, 6:09pm UTC](https://forum.ionicframework.com/t/modal-wont-close/1769 "2014-03-11T18:09:11Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![rob](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@rob](https://forum.ionicframework.com/u/rob)\
**Post date:** [March 11, 2014, 6:09pm UTC](https://forum.ionicframework.com/t/modal-wont-close/1769/1 "2014-03-11T18:09:12Z")

</div>

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

Controller:

```
$scope.rightButtons = [{
    type: 'button-icon icon ion-navicon',
    tap: function(e) {
        $scope.modal.show();
    }
}];

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

$scope.openModal = function() {
    $scope.modal.show();
};
  
$scope.closeModal = function() {
    $scope.modal.hide();
};

```

Main Template:

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

```

Modal Template:

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

```

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [March 11, 2014, 6:27pm UTC](https://forum.ionicframework.com/t/modal-wont-close/1769/2 "2014-03-11T18:27:26Z")

</div>

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

Can you post a demo?

---

<div class="post-metadata">

**Author:** ![rob](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@rob](https://forum.ionicframework.com/u/rob)\
**Post date:** [March 11, 2014, 6:28pm UTC](https://forum.ionicframework.com/t/modal-wont-close/1769/3 "2014-03-11T18:28:01Z")

</div>

I tried that and it doesn’t fire.

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [March 11, 2014, 6:49pm UTC](https://forum.ionicframework.com/t/modal-wont-close/1769/4 "2014-03-11T18:49:55Z")

</div>

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

See this as a starting point:

https://codepen.io/calendee/embed/preview/oCLJF?height=300&slug-hash=oCLJF&default-tabs=js,result&host=https://codepen.io

---

<div class="post-metadata">

**Author:** ![rob](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@rob](https://forum.ionicframework.com/u/rob)\
**Post date:** [March 11, 2014, 9:28pm UTC](https://forum.ionicframework.com/t/modal-wont-close/1769/5 "2014-03-11T21:28:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\
**Post date:** [March 12, 2014, 3:49am UTC](https://forum.ionicframework.com/t/modal-wont-close/1769/6 "2014-03-12T03:49:07Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![rob](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@rob](https://forum.ionicframework.com/u/rob)\
**Post date:** [March 12, 2014, 1:34pm UTC](https://forum.ionicframework.com/t/modal-wont-close/1769/7 "2014-03-12T13:34:31Z")

</div>

Here is part of it:

[http://jsfiddle.net/robmacprac/Sb8E7/](http://jsfiddle.net/robmacprac/Sb8E7/)

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

---

<div class="post-metadata">

**Author:** ![rob](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@rob](https://forum.ionicframework.com/u/rob)\
**Post date:** [March 12, 2014, 2:01pm UTC](https://forum.ionicframework.com/t/modal-wont-close/1769/8 "2014-03-12T14:01:39Z")

</div>

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