Angular-hotkeys service is great, modal is kinda fug. This uses bootstrap instead to add just a little spice.

hotkeysModal.scss

.hotkeyModal {
  display: block;
  z-index: -1000;

  &.in {
    background: rgba(0,0,0,0.5);
    z-index: 1100;
  }

  table {
    width: 100%;
  }

  .hotkey-keys {
    padding: 5px;
    text-align: right;
  }

  .hotkey-key {
    display: inline-block;
    color: #fff;
    background-color: #333;
    border: 1px solid #333;
    border-radius: 5px;
    text-align: center;
    margin-right: 5px;
    box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb;
    padding: 5px 9px;
    font-size: 1em;
  }

  .hotkey-text {
    padding-left: 10px;
    font-size: 1em;
  }
}

hotkeysTemplate.js

/*
http://chieffancypants.github.io/angular-hotkeys/
*/

angular.module('myApp')
	.config(function (hotkeysProvider) {
		hotkeysProvider.template = '' +
			'<div class="modal fade hotkeyModal" ng-class="{in: helpVisible}">' +
				'<div class="modal-dialog">' +
					'<div class="modal-content">' +
						'<div class="modal-header">' +
							'<button type="button" class="close" ng-click="closeCheatSheet()">&times;</button>' +
							'<h4 class="modal-title">{{ title }}</h4>' +
						'</div>' +
						'<div class="modal-body">' +
							'<table><tbody>' +
								'<tr ng-repeat="hotkey in hotkeys | filter:{ description: \'!$$undefined$$\' }">' +
									'<td class="hotkey-keys">' +
									'<span ng-repeat="key in hotkey.format() track by $index" class="hotkey-key">{{ key }}</span>' +
									'</td>' +
									'<td class="hotkey-text">{{ hotkey.description }}</td>' +
								'</tr>' +
							'</tbody></table>' +
						'</div>' +
					'</div><!-- /.modal-content -->' +
				'</div><!-- /.modal-dialog -->' +
			'</div><!-- /.modal -->';
	});