<ion-side-menus> not working inside <ion-view> on iPhone

I have an application that at the root does not require any ion-side-menus. However, there is one view that does require an ion-side-menu.

For instance, take a restaurant. You may list a bunch of options on the home view (menu, contact, map), but when you click menu you move to a view that list options for breakfast, lunch and dinner. Instead of taking the user to a new view, you’d like to slide out a menu when the user clicks breakfast with all your options.

I was able to implement this quite well, using Android as my development target. However when switching to iPhone, the view completely stops rendering at all!

Below is the ion-view I’m using:

<ion-view view-title="Menu">
	    <ion-side-menus enable-menu-with-back-views="false">
				<ion-item ng-repeat="meal in vm.meals" ng-click="vm.onMealClick(meal.name)">
		<ion-side-menu side="right">
			<div class="item item-button-left">
				<button class="button button-clear button-small" menu-close>
					<i class="icon ion-close"></i>

And this is the menu toggle binding:

var vm = this;
vm.onMealClick = onMealClick;

	function onMealClick(meal) {
		vm.selectedMeal = meal;

Does anyone know of issues using ion-side-menus inside of an ion-view? In my real application, this provides an extremely organized user-experience, so it’s something I’d like to keep pursuing and not change the layout to accommodate.

Thanks for any and all help.

  • Eric