Using a Modal from its own template file

I am having trouble using modals from the template file. The doc states ‘If it is in its own template file, remove the script tags and call it by file name.’

I have removed the script tags and and placed the scipt in its own file named my-modal.html.

What do I change to:

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicModal) {
 $ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
 }).then(function(modal) {
$scope.modal = modal;
$scope.openModal = function() {
$scope.closeModal = function() {
//Cleanup the modal when we're done with it!
$scope.$on('$destroy', function() {
 // Execute action on hide modal
$scope.$on('modal.hidden', function() {
 // Execute action
// Execute action on remove modal
 $scope.$on('modal.removed', function() {
// Execute action

Any help greatly appreciated.


you need to set the fullpath to your template like


it depends where your files are stored in the www-dir

So if my modal .html was simply in:


$ionicModal.fromTemplateUrl(‘my-modal.html’, {

$ionicModal.fromTemplateUrl(‘templates/my-modal.html’, {

Should work yes?

yarp! should work :wink:

1 Like