iPhone App Closes When Clicking on Input Box

ionic-v1
1

I am new to app development and I have been working on an app for both iPhone and Android. I got pull to refresh working, list slide and modals so far. Basically, how it works is a user can slide to the left and update the list item but tapping the button and a modal comes up. So far so good, everything works as it should on an Android. I have added the iPhone platform thinking things would be better, but no.

What happens is when the modal comes up and I go to click on one of the input boxes, the app just closes. This is happening almost every time now, it was only if I click on a certain area, but now it is when and where ever I click.

Below is the code that is in my template for the modal.

<ion-modal-view>
    <ion-header-bar>
        <h1 class="title">{{ modalReportTitle }}</h1>
        <div class="buttons" >
            <button class="button button-clear" ng-click="destroyModal()">Close</button>
        </div>
    </ion-header-bar>
    <ion-content>
        <form name="prices">
            <div class="list" ng-controller="ReportPrice">
                <div class="item item-input-inset">
                    <span class="input-label">Regular</span>
                    <label class="item-input-wrapper">
                        <input style="font-size: 30px; height: 50px" name="regLabel" ng-init="inputIdReg='regButton';"
                               ng-attr-id="inputId" type="text" ng-change="changeButton(1)"
                               ng-model="price.regPrice" placeholder="{{ regPlaceHolder }}">
                    </label>
                    <button ng-class="regButton" ng-click="reportPrice(1, price)">
                        {{ regButtonText }}
                    </button>
                </div>
                <div class="item item-input-inset">
                    <span class="input-label">Mid Grade</span>
                    <label class="item-input-wrapper">
                        <input style="font-size: 30px; height: 50px" name="midLabel" ng-init="inputIdMid='midButton';"
                               id="midPriceText" type="tel" ng-change="changeButton(2)" 
                               ng-model="price.midPrice" placeholder="{{ midPlaceHolder }}" pattern="[0-9]*"
                               inputmode="numeric" >
                    </label>


                    <button ng-class="midButton" ng-click="reportPrice(2, price)">
                        {{ midButtonText }}
                    </button>
                </div>
                <div class="item item-input-inset">
                    <span class="input-label">Premium</span>
                    <label class="item-input-wrapper">
                        <input style="font-size: 30px; height: 50px" name="preLabel" ng-init="inputIdPre='preButton';"
                               id="prePriceText" type="tel" ng-change="changeButton(3)" 
                               ng-model="price.prePrice" placeholder="{{ prePlaceHolder }}" pattern="[0-9]*"
                               inputmode="numeric">
                    </label>


                    <button ng-class="preButton" ng-click="reportPrice(3, price)">
                        {{ preButtonText }}
                    </button>
                </div>
            </div>
        </form>
    </ion-content>
</ion-modal-view>