title: Ionic overlay with ios style selector
body: <p>On creating a hybrid app using ionic, I have encountered the following problem: I would like to create a overlay with a ios style selector, like this:</p>
  
  <p><a href="https://i.stack.imgur.com/gfZbI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gfZbI.png" alt="enter image description here"></a></p>
  
  <p>I have no idea how to do this. I have the following code:</p>
  
  <p>Page:</p>
  
  <pre><code>&lt;ion-item ng-click="openQuestionTypeSelectModal()" ng-model="currentQuestion.type"&gt;
      {{ currentQuestion.type }}
      &lt;i class="ion ion-chevron-down"&gt;&lt;/i&gt;
  &lt;/ion-item&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>$scope.openQuestionTypeSelectModal = function() {
      $ionicModal.fromTemplateUrl('selectquestiontypemodal.html', {
          scope: $scope,
          animation: 'slide-in-up'
      }).then(function(modal) {
          $scope.modal = modal;
          $scope.modal.show().then(function() {});
      });
  };
  
  $scope.bindQuestionType = function(item) {
      $scope.$parent.$parent.$parent.currentQuestion.type = item.type;
      //console.log($scope.$parent.$parent.$parent.currentQuestion.type);
      //$scope.setCurrentType(item.type);
  };
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;ion-modal-view class="modal" ng-controller="SupportController"&gt;
      &lt;ion-header-bar class="custom-modal-header"&gt;
        &lt;h1 class="title"&gt;Temporary title&lt;/h1&gt;
      &lt;/ion-header-bar&gt;
      &lt;ion-content class="bigger-header" on-close="closeModal()"&gt;
          &lt;div ng-repeat="question in questionTypes"&gt;
              &lt;div
                  class="item item-icon-right"
                  ng-click="bindQuestionType(question)"&gt;
                  {{ question.type }}
                  &lt;i class="icon ion-checkmark" ng-if="question.type === $parent.$parent.$parent.currentQuestion.type"&gt;&lt;/i&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/ion-content&gt;
  &lt;/ion-modal-view&gt;
  </code></pre>
  
  <p>I have no idea how to proceed here, or if it is even possible.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I tried $ionicBackdrop, but had 2 problems.</p>
  
  <p>1: I couldn't close the backdrop on click instead of timer. I read <a href="https://forum.ionicframework.com/t/backdrop-example/15863" rel="nofollow noreferrer">https://forum.ionicframework.com/t/backdrop-example/15863</a> and tried the suggestions, but they didn't help. I created a scope function containing <code>$ionicBackdrop.release()</code> but whereever I tried to call it using ng-click, nothing happened.</p>
  
  <p>2: I didn't find any way to put the <code>select</code> on top of the backdrop. Therefore, I couldn't try the select. If I put the select in a $ionicModal, I only got a regular select dropdown, not the iOS styled one. </p>