how to trigger an event on a div layered on top of a disabled input field

I've been using ionic's angular framework to create a comment list and a comment input box on the bottom of a mobile web page. I am trying to set up a function so that if a user clicks on the comment box or button it throws up a login modal before letting them comment/continue. I ended up disabling the input initially so that it doesn't bring up the keyboard which hides/pushes my modal login view.

The issue I'm running into is that the clickable area seems to be the entire div and button except for the input text area (which is most of the hit area). How can I get it to do the checkAuth on the input text hit area while input is disabled... or conversely, if I move the checkauth to the input onclick event, how can I enable the input and not have it bring up a keyboard.

  <div class="bar bar-footer item-input-inset" style="position:fixed; " ng-click="checkAuth()">
    <label class="item-input-wrapper">
      <input type="text" placeholder="comment" ng-disabled="true">
    </label>
    <button class="button button-small" ng-disabled="true">
      Submit
    </button>
  </div>

Unless you need to support IE 10 and earlier, you could try setting pointer-events: none on the input when it's disabled.