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 pag

Answer 1

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

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

Answer 2

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>