Angular-Hammer: Integrate functionality into an already existing Controller

Question

Hello there and thanks for stopping by,

I've been stuck for many hours trying to integrate Hammer.js 2.x into my Angular 1.x application. I took two different approaches:

First, I tried to to it with JQUERY and vanilla Hammer by trying to manipulate DOM-elements "directly" like this:

jQuery(document).on("mouseenter", document, function () {
console.log("go");

var myElement = jQuery("ui-view .message-wrap");
console.log(myElement[0]);

// listen to events...
Hammer(myElement[0]).on("tap press swipeleft", function(ev) {
    console.log(ev.type);
});
});

Edit (This part works now for one element): I know this is far from perfect and using 'mouseenter' makes absolutely no sense, by it worked for all the "static" and "ui-view" elements. Or at least one of them.

So I tried a more sophisticated approach, by directly integrating Hammer into Angular by using AngularHammer. This worked well, until I relaized I can't simply follow the approach they took on their simple demo, because the elements that use "hm-tap", are already "sorrounded" by a controller. Namely messagesCtrl. So, I tried to put their code into a new funtion inside that already existing Controller, but that doesn't seem to work. It goes as far as logging "Delete process started" to the console, but doesn't enter "Hammer(myElement).on("tap", function (ev)". I think I may be missing something connected to the $scope.

Relevant Code:

app.js:

angular
.module('angularfireSlackApp', [
'firebase',
'angular-md5',
'ui.router',
'hmTouchEvents' ])
.config(function ($stateProvider, $urlRouterProvider) {
.state('channels.messages', {
        url: '/{channelId}/messages',
        templateUrl: 'channels/messages.html',
        controller: 'MessagesCtrl as messagesCtrl',
        resolve: {
            messages: function ($stateParams, Messages) {
                return Messages.forChannel($stateParams.channelId).$loaded();
            },
            channelName: function ($stateParams, channels) {
                return '#' + channels.$getRecord($stateParams.channelId).name;
            }
        }
    })

messages.controller.js

angular.module('angularfireSlackApp')
.controller('MessagesCtrl', function ($scope, profile, channelName, messages) {
    var messagesCtrl = this;
messagesCtrl.deleteMessage = function () {
        console.log(messagesCtrl);
        console.log("Delete process started");
        var myElement = document.getElementById('workxx');
        //console.log(myElement);
        console.log($scope.eventType);
        Hammer(myElement).on("tap", function (ev) {
            console.log(myElement);
            console.log(ev.type);
        });
    };

messages.html:

<div class="message" ng-show="message.image">
<img src="{{ message.image }}" id="workxx" style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" hm-tap="messagesCtrl.deleteMessage()">
</div>

Rigt now I'm at a point, where I really don't know where the problem lies and what to do next, so I'd like to ask you, who have more experience with Angular.

If you want me to share more code, just let me know. Your time and help is appreciated!