Ionic context menu as a service

any.html

<ion-view view-title="{{ anyItem.name }}">

	<ion-nav-buttons side="right">
		<button class="button icon ion-more" ng-click="showOptions($event)"></button> <!-- IMPORTANT: include $event -->
	</ion-nav-buttons>

	<ion-content>
		<!-- The rest of your template -->
	</ion-content>

</ion-view>

any_controller.js

angular.module('app.any_controller', [
	'services.special.app_menu'
])

	.controller('AssetsShowController', function($scope, AppMenuService, anyItem) {

		// A random item
		$scope.anyItem = anyItem;

		var menuOptions = [
			{
				id: 'edit',
				text: 'Edit',
				callback: function() {
					$state.go('^.edit', { anyItemId: anyItem.id });
					$scope.popover.hide();
				}
			},
			{
				id: 'delete',
				extraClass: 'assertive', // You can add a class to each of the menu's options
				text: 'Delete',
				callback: function() {
					// Delete anyItem code goes here
					$scope.popover.hide();
				}
			},
		];

		$scope.popover = AppMenuService.createMenu({
				scope: $scope,
				menuOptions: menuOptions
			}
		);

		$scope.showOptions = function($event) {
			// IMPORTANT: include $event parameter
			$scope.popover.show($event);
		};
		
	})

;

services.special.app_menu.js

angular.module('services.special.app_menu', [])
	.factory('AppMenuService', ['$ionicPopover', function($ionicPopover) {

		return {
			createMenu: createMenu
		};

		function createMenu(settings) {

			settings = settings || {};

			if (!settings.scope) {
				throw('A scope setting must be provided');
			}

			var scope = settings.scope;

			var template = '<ion-popover-view><ion-content>';

			if (settings.title) {
				template += '<ion-header-bar><h1 class="title">' + settings.title + '</h1></ion-header-bar>';
			}

			template += '<div class="list">';

			var menuOptions = settings.menuOptions || [];

			var menuOptionsIndex = {};

			menuOptions.forEach(function(menuOption) {

				if (!menuOption.id || !menuOption.text || !menuOption.callback) {
					return;
				}

				menuOptionsIndex[menuOption.id] = menuOption;

				var itemClass = 'item' + (menuOption.extraClass ? ' ' + menuOption.extraClass : '');

				template += '<a class="' + itemClass + '" ng-click="popoverCallback(\'' + menuOption.id + '\')">' + menuOption.text + '</a>';
			});

			template += '</div></ion-content></ion-popover-view>';

			scope.popoverCallback = function(optionId) {
				menuOptionsIndex[optionId].callback();
			};

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

			scope.$on('popover.hidden', function() {
				if (settings.hiddenCallback) {
					settings.hiddenCallback();
				}
			});

			scope.$on('popover.removed', function() {
				if (settings.removedCallback) {
					settings.removedCallback();
				}
			});

			return $ionicPopover.fromTemplate(template, {
				scope: scope
			});
		}

	}])
;