JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/ccampbell/mousetrap/master/mousetrap.min.js"></script>
<div ng-app="app">
  <div ng-controller='TodoController' keypress='shortcuts'>Foo</div>
</div>

JavaScript

angular.module('app', ['directives', 'controllers']);

angular.module('directives', [])
.directive('keypress', [function () {
 	return function (scope, element, attrs) {
 		// console.log(scope, element, attrs);
 		var attribute = scope.$eval(attrs.keypress || '{}');
 		for (var k in attribute) {
 			console.log('binding ' + k + ' as ' + attribute[k]);
 			Mousetrap.bind(k, function() { return attribute[k](scope, element); });
 		}
 	};
}]);

angular.module('controllers', [])
.controller('TodoController', function($scope) {
  $scope.shortcuts = {
    'w': function () { console.log('w'); },
    's': function () { console.log('s'); },
    'a': function () { console.log('a'); },
    'd': function () { console.log('d'); }
  };
});