Ionic modal

                       In Ionic, modals are provided by the $ionicModal  directive.  Ionic’s modal allows creation from either a template string or a URL. 
Here in this example we are using a URL.

Modals are created with a scope. This can be used in simple examples to pass data. 

Example:-
For using the $ionicModal directive in our example following will be the code of index.html-

<ion-header-bar class="bar-energized">
<h1 class="title">
Contact Info
</h1>
<ion-content>
<div class="card" ng-controller='MainCtrl' ng-click="openModal()">
<div class="item item-divider">
{{contact.name}}
</div>
<div class="item item-text-wrap">
{{contact.info}}
</div>
</div>
</ion-content>

contact.html 

HTML page which we call by the $ionicModal-

<script id="contact.html" type="text/ng-template"> <div class="modal"> <ion-header-bar> <h1 class="title">Edit Contact</h1> </ion-header-bar> <ion-content> <div class="list"> <label class="item item-input"> <span class="input-label">Name</span> <input type="text" ng-model="contact.name"> </label> <label class="item item-input"> <span class="input-label">Info</span> <input type="text" ng-model="contact.info"> </label> </div> <button class="button button-full button-energized" ng-click="closeModal()">Done</button> </ion-content> </ </div></script>

Now our controller.js file look like-

app.controller('MainCtrl', function($scope, $ionicModal) { $scope.contact = { name: 'Demo', info: 'Tap anywhere on the card to open the modal' } $ionicModal.fromTemplateUrl('contact.html', { scope: $scope, animation: 'slide-in-up' }).then(function(modal) { $scope.modal = modal }) $scope.openModal = function() { $scope.modal.show() } $scope.closeModal = function() { $scope.modal.hide(); }; $scope.$on('$destroy', function() { $scope.modal.remove(); });})