ionicModal doesn't open until 3rd tap on iPhone

I have set the on-tap value of a div to open a modal which is defined in the page’s controller. The div is part of an ng-repeat section. The modal function also accepts some variables passed to it by the div.

When the app is first started on my device (iPhone 6 running iOS 7), I have to tap the div three times before the modal will open. After that, it opens consistently when I tap. But when the app first starts, I have to tap the div 3 times.

(I haven’t run it in the emulator or --lab b/c I have some Oauth.io code that breaks the app in those environs. I also haven’t tried it on an Android device.)

There are no errors at all in the console. Once the modal does open, it works as expected.

Any advice?

Here’s the code:

HTML

  <div on-tap="doModal('{{embed.ID}}','reply','{{embed.oembed}}','{{embed.user}}');">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 72" width="100" height="50">
      <path d="imagestuffhere"/>
      </svg>
   </div>

CONTROLLER

$scope.doModal = function(this_ID,modaltype,this_oembed,this_user) {    
    $scope.contact = {
    name:   this_ID,
    info:   modaltype,
    oembed: this_oembed,
    user:   this_user
  }

  if (modaltype == 'repost') {
    $scope.modaltempl = 'templates/repost-modal.html';
  }
  else if (modaltype == 'reply') {
    $scope.modaltempl = 'templates/reply-modal.html';
  }
  else if (modaltype == 'like') {
    $scope.modaltempl = 'templates/like-modal.html';
  }
  else {
    $scope.modaltempl = 'templates/like-modal.html';
  }

  $ionicModal.fromTemplateUrl($scope.modaltempl, {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function (modal) {
    $scope.modal = modal;
    $scope.modal.show();
    console.log($scope.modaltempl);
  });
};    

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

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

I’ve tried pulling the $ionicModal.fromTemplateUrl($scope.modaltempl, bit outside of $scope.doModal and calling $scope.modal.show from within $scope.doModal, but the result is the same.

It definitely gets to the scope.modal.show(); statement even when the modal does not open, because the console.log I’ve included just after it gets output.

Before I had added the svg to the interface, I was testing this using a button element and had the same issue. It also had the same issue when I used ng-click instead of on-tap.

Thanks for any help!

Turns out the issue was not in the Ionic controller code nor the triggering html, but in the modal template, itself.

Per the Ionic documentation, I had each of my modal templates wrapped in this:

<script type="text/ng-template" id="repost-modal.html"></script>

By removing that and replacing it with just <ion-modal-view></ion-modal-view> the issue was resolved and the modals now open very nicely on the first click.