How to open up an Ionic Modal upon click?

Question

I am new to Ionic and AugularJS and I am having a problem opening up a modal box upon click on a checkbox/radio button on the third option for hashtag search in the settings page. I have included an ng-controller and ng-click to take action. I looked in the debugger and it displayed an error:

GET http://localhost:8100/hashtag-modal [HTTP/1.1 404 Not Found 1ms]

I know that 404 Not Found means it didn't find the templateUrl but every nav page I have is in the index.html and they work fine except hashtag-modal.html in the app.js file. Why isn't it working and how do I resolve this issue?

app.js

// Navigation pages
app.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  .state('index', {
    url: '/index',
    templateUrl: 'index.html'
  })
  .state('about', {
    url: '/about',
    templateUrl: 'about.html'
  })
  .state('settings', {
    url: '/settings',
    templateUrl: 'settings.html'
  })
  .state('hashtag-modal', {
    url: '/hashtag-modal',
    templateUrl: 'hashtag-modal',
    controller: 'hashtag-modalCtrl'
  })

  $urlRouterProvider.otherwise("/index"); // if no url found, go back to index
})

// Hashtag Search option
app.controller('hashtagController', ['$scope', function($scope)
                                     {
                                         $scope.hashtagValue = 'Search'; // default value

                                         $scope.hashtag = function()
                                         {
                                             $scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value


                                         };

                                     }]);

// hashtag search modal
app.controller('hashtag-modalCtrl', function($scope, $ionicModal) {
    $ionicModal.fromTemplateUrl('hashtag-modal.html', {
        scope: $scope,
        animation: 'slide-in-up',
        focusFirstInput: true
    }).then(function(modal) {
        $scope.modal = modal;
    });
    $scope.openModal = function() {
        $scope.modal.show();
    };
    $scope.closeModal = function() {
        $scope.modal.hide();
    };
    // Cleanup the modal when we're done with it!
    $scope.$on('$destroy', function() {
        $scope.modal.remove();
    });
    // Execute action on hide modal
    $scope.$on('modal.hidden', function() {
        // Execute action
    });
    // Execute action on remove modal
    $scope.$on('modal.removed', function() {
        // Execute action
    });
});

index.html

<!-- SETTINGS -->
<script id="settings.html" type="text/ng-template">
  <!-- The title of the ion-view will be shown on the navbar -->
  <ion-view title="Settings" hide-back-button="false">
    <ion-content class="padding">
      <!-- The content of the page -->
        <p>Check one of the options below to set how you wish to categorize and view your Instagram photos.
        </p>
        <div class="settings-list">
            <label class="item item-radio">
                <input type="radio" name="settings-group" value="recent">
                <div class="item-content">
                    Recent
                </div>
                <i class="radio-icon ion-checkmark"></i>
            </label>
            <label class="item item-radio">
                <input type="radio" name="settings-group" value="popular">
                <div class="item-content">
                    Most Popular
                </div>
                <i class="radio-icon ion-checkmark"></i>
            </label>
            <label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();modal.show();">
                <input type="radio" name="settings-group" value="search">
                <div class="item-content">
                    <span class="ion-pound"></span>&nbsp;&nbsp;&nbsp;<span id="hashtagInput">{{hashtagValue}}</span>
                </div>
                <i class="radio-icon ion-checkmark"></i>
            </label>
        </div>
    </ion-content>
  </ion-view>
</script>     

<!-- HASHTAG SEARCH MODAL -->
<script id="hashtag-modal.html" type="text/ng-template">
  <ion-modal-view hide-back-button="false">
    <ion-header-bar>
      <h1 class="title">Hashtag Search</h1>
    </ion-header-bar>
    <ion-content>
      <label class="item item-input">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" placeholder="Search">
      </label>
    </ion-content>
  </ion-modal-view>
</script>

---

Revised app.js

I added an $ionicModal to the hashtagController but it is said Error: $ionicModal is undefined. Where else is it undefined?

// Hashtag Search option
app.controller('hashtagController', ['$scope', function($scope, $ionicModal)
{
  $scope.hashtagValue = 'Search'; // default value

  $scope.hashtag = function()
  {
    $scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value
    $ionicModal.fromTemplateUrl('hashtag-modal.html', {
        scope: $scope,
        animation: 'slide-in-up',
        focusFirstInput: true
    }).then(function(modal) {
        $scope.modal = modal;
    });
    $scope.openModal = function() {
        $scope.modal.show();
    };
    $scope.closeModal = function() {
        $scope.modal.hide();
    };
    // Cleanup the modal when we're done with it!
    $scope.$on('$destroy', function() {
        $scope.modal.remove();
    });
    // Execute action on hide modal
    $scope.$on('modal.hidden', function() {
        // Execute action
    });
    // Execute action on remove modal
    $scope.$on('modal.removed', function() {
        // Execute action
    });


                                         }

                                     }]);

Revised label

<label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();openModal();">
  <input type="radio" name="settings-group" value="search">
  <div class="item-content">
    <span class="ion-pound"></span>&nbsp;&nbsp;&nbsp;<span id="hashtagInput">{{hashtagValue}}</span>
  </div>
  <i class="radio-icon ion-checkmark"></i>
 </label>

Answer 1

ionic modal has nothing to do with routes.

You just load a static html template from server, and that same html is shown in ionic modal with all the bindings.

Instead of declaring a seperate controller, move it inside the same controller :

app.controller('hashtagController', ['$scope', function($scope, $ionicModal) {
    $scope.hashtag = function() {
        $scope.hashtagValue = 'blackandwhitephotography'; // if selected, it'll display this value

        $ionicModal.fromTemplateUrl('hashtag-modal.html', {
            scope: $scope,
            animation: 'slide-in-up',
            focusFirstInput: true
        }).then(function(modal) {
            $scope.modal = modal;
            $scope.modal.show();
        }); 
    };

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

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


    $scope.$on('$destroy', function() {
        $scope.modal.remove();
    });

    $scope.$on('modal.hidden', function() {
        // Execute action
    });

    $scope.$on('modal.removed', function() {
        // Execute action
    });
}

Then in your HTML :

    <label class="item item-radio" id="hashtagRadio" ng-controller="hashtagController" ng-click="hashtag();openModal();">
        <input type="radio" name="settings-group" value="search">
        <div class="item-content">
            <span class="ion-pound"></span>&nbsp;&nbsp;&nbsp;<span id="hashtagInput">{{hashtagValue}}</span>
        </div>
        <i class="radio-icon ion-checkmark"></i>
    </label>

Answer 2

Ionic has a nice codepen example showing how to open a modal with an ng-click

http://codepen.io/ionic/pen/gblny