Ionic Popover Works on XCode Simulator but not on iPhone

Question

I have an Ionic Popover on my app. The popover appears when I run ionic serve, ionic emulate ios, and the XCode simulator. However, as soon as I simulate the app to my iPhone 4S on XCode or use the Ionic View app to view my own application, the popover does not appear. I've debugged EVERYTHING and the code does not work. No errors appear on my console when running the app.

Once in a blue moon the popover will appear on my 4S, but there is no logic to how the popover appears. I would change a piece of code, the popover appears, then when I change it again, the popover disappears. I repeat this process and go back to my old code version that worked and it doesn't work. This is frustrating. What's worse I fear no one will respond to this message. Any help as to why there is a discrepancy between the iPhone simulator and my actual iPhone would be great. Thanks.

Button HTML

    <div ng-controller="FilterPopoverController as filterPopover"    class="text-right">
      <div on-tap="filterPopover.open()" ng-class="{filterButtonOpened: filterPopover.opened}"  id="filter-button">
        <span class="assertive" >
          <i class="icon ion-arrow-down-b"></i>
          <span class="bold">FILTER</span>
        </span>
      </div>
    </div>

Popover HTML

<ion-popover-view id="filterPopover">
  <ion-header-bar class="bar-dark">
    <h1 id="popoverTitle" class="bold">FILTER BY</h1>
  </ion-header-bar>

  <ion-content>
    <p>Content here</p>
  </ion-content>
</ion-popover-view>

The Popover Controller

.controller('FilterPopoverController', filterPopoverController)

filterPopoverController.$inject = ['$ionicPopover', '$filter', '$scope', '$timeout'];

function filterPopoverController($ionicPopover, $filter, $scope, $timeout) {
  var vm = this;

  vm.open = open;

  vm.popover = null;

  vm.opened = false;

  activate();

  //Cleanup the popover when we're done with it!
  $scope.$on('$destroy', function() {
    vm.popover.remove();

    vm.opened = false;
  });

  $scope.$on('popover.hidden', function() {
    vm.opened = false;
  });

  function activate( ) {
    $ionicPopover.fromTemplateUrl('/templates/search/filter-popover.html', {
      scope: $scope
    }).then(function(popover) {
      vm.popover = popover;
    });
  }



  function open(  ) {
      vm.opened = true;

      vm.popover.show();
  }
}

I've had to remove sensitive info from some of this code but this is the gist of it.

Answer 1

I have made two modifications to your posted code: first one is to change the path of popover template to be:

'templates/search/filter-popover.html'

instead of

'/templates/search/filter-popover.html'

You need to reference this file starting from current directory instead of root directory

Second changed is to pass $event input while opening the popover, this is from official documentation of ionic Popover

After applying both of these changes to the posted code, I manage to see popover on desktop browser, ios simulator, real iPhone 4 consistenly

Here is the final code:

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.controller('FilterPopoverController', filterPopoverController)

filterPopoverController.$inject = ['$ionicPopover', '$filter', '$scope', '$timeout'];

function filterPopoverController($ionicPopover, $filter, $scope, $timeout) {
  var vm = this;

  vm.open = open;

  vm.popover = null;

  vm.opened = false;

  activate();

  //Cleanup the popover when we're done with it!
  $scope.$on('$destroy', function() {
    vm.popover.remove();

    vm.opened = false;
  });

  $scope.$on('popover.hidden', function() {
    vm.opened = false;
  });

  function activate( ) {
    $ionicPopover.fromTemplateUrl('templates/search/filter-popover.html', {
      scope: $scope
    }).then(function(popover) {
      vm.popover = popover;
    });
  }



  function open( $event ) {
      vm.opened = true;

      vm.popover.show($event);
  }
}

<div ng-controller="FilterPopoverController as filterPopover"    class="text-right">
  <div on-tap="filterPopover.open($event)" ng-class="{filterButtonOpened: filterPopover.opened}"  id="filter-button">
    <span class="assertive" >
      <i class="icon ion-arrow-down-b"></i>
      <span class="bold">FILTER</span>
    </span>
  </div>
</div>

I hope that this solves your problem.