Displaying different modals depending on switch in AngularJS and Onsen UI

Question

I am trying to display 2 different modals depending on which switch a user selects.

Its a cross platform app that uses AngularJS, Onsen UI and Monaca.

I have the switches set as as below:

<ul class="list">
    <li class="list__item">
        This is switch ONE
        <label class="switch switch--list-item">
            <input type="checkbox" class="switch__input" checked id="show-modal" onclick="modal.show('switchOneModal')">
            <div class="switch__toggle"></div>
        </label>
    </li>

    <li class="list__item">
        This is switch TWO
        <label class="switch switch--list-item">
            <input type="checkbox" class="switch__input" checked id="show-modal" onclick="modal.show('switchTwoModal')">
            <div class="switch__toggle"></div>
        </label>
    </li>
</ul>

Then on the same page (ons-page) I am trying to display either modal depending on which switch was toggled as below. But I am always getting the same modal back regardless of which switch I click? Where are I going wrong with this please?

<!-- Displays Modal ONE  -->
<ons-modal var="switchOneModal">
    <div class="alert-dialog-mask"></div>

    <div class="alert-dialog alert-dialog--android">
        <div class="alert-dialog-title alert-dialog-title--android">
            <div style="text-align: center">Further Details</div>
        </div>

        <div class="alert-dialog-content alert-dialog-content--android">
            <div style="text-align: center; padding-top: 10px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px;">
                <p>You selected switch ONE</p>
            </div>
        </div>
    </div>

    <div class="alert-dialog-footer alert-dialog-footer--one">
        <button class="alert-dialog-button alert-dialog-button--one" ng-click="modal.hide()">Cancel</button>            
    </div>
</ons-modal>

<!-- Displays Modal TWO -->
<ons-modal var="switchTwoModal">
    <div class="alert-dialog-mask"></div>

    <div class="alert-dialog alert-dialog--android">
        <div class="alert-dialog-title alert-dialog-title--android">
            <div style="text-align: center">Further Details</div>
        </div>

        <div class="alert-dialog-content alert-dialog-content--android">
            <div style="text-align: center; padding-top: 10px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px;">
                <p>You selected switch TWO</p>
            </div>
        </div>
    </div>

    <div class="alert-dialog-footer alert-dialog-footer--one">
        <button class="alert-dialog-button alert-dialog-button--one" ng-click="modal.hide()">Cancel</button>            
    </div>
</ons-modal>

Answer 1

Answering own question for anyone else stuck on the same issue.

"Figured out the issue. It was to do with the method call to show the modal. It should have been onclick="switchTwoModal.show('modal')" and not onclick="modal.show('switchTwoModal')""