Onsen Ui & AngularJs: Delayed function after swipe gesture - angularjs

Question

I´m using the swipe gesture to navigat to a page / template.
If I swipe to the left, I want to fade in / fade out the like-col for 5 Seconds.
If I swipe to the right, I want to fade in / fade out the pass-col for 5 Seconds.
After fading out the like-col or pass-col, both gestures should navigate to the template match1.html.
Currently the columns appear shortly after 5 seconds and it goes directly to the template match1.html
What am I doing wrong? Thank you for your tips.
var app = angular.module('myApp', ['onsen', 'ngSanitize', 'ngRoute', 'onsen.directives', 'ngTagsInput']);
app.controller('findPatientsController', function($scope, $route, $window, $timeout) {
$scope.startFindPatient = function() {
$timeout(function() {
findPatientsNavigator.pushPage('match1.html', {
animation: 'slide'
});
}, 1000);
};
$scope.swipe = {
active: false
};
$scope.onGestureMatch1 = function(gesture) {
if (gesture == 'Swipe Left') {
console.log('like');
$scope.swipe.like = !$scope.swipe.like;
$timeout(function() {
findPatientsNavigator.pushPage('match2.html', {
animation: 'slide'
});
}, 5000);
}
if (gesture == 'Swipe Right') {
console.log('pass');
$scope.swipe.pass = !$scope.swipe.pass;
$timeout(function() {
findPatientsNavigator.pushPage('match2.html', {
animation: 'slide'
});
}, 5000);
}
}
});
<ons-navigator animation="slide" ng-controller="findPatientsController" var="findPatientsNavigator">
<ons-page id="introFindPatientsPage">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="slidingMenu.toggleMenu()">
<ons-icon icon="bars"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Schnellsuche
</div>
</ons-toolbar>
<ons-gesture-detector ng-swipeleft="onGestureStart('Swipe Left')" ng-swiperight="onGestureStart('Swipe Right')">
<div id="detect-area" style="width: 100%; height: 500px;">
<div class="searchInfo" ng-init="startFindPatient()">
<span class="searchText"><i class="fa fa-search"></i> Search...</span>
</div>
</div>
</ons-gesture-detector>
</ons-page>
<ons-template id="match1.html">
<ons-page id="match1Page">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="slidingMenu.toggleMenu()">
<ons-icon icon="bars"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Neuer Match
</div>
</ons-toolbar>
<ons-gesture-detector ng-swipeleft="onGestureMatch1('Swipe Left')" ng-swiperight="onGestureMatch1('Swipe Right')">
<ons-row class="swipeRow">
<ons-col width="80px" ng-show="swipe.like" class="like-col col ons-col-inner">
<div class="info-unit">
<ons-icon icon="fa fa-star fa-likePass"></ons-icon>
</div>
</ons-col>
<ons-col class="id-col col ons-col-inner">
<div class="newMatch-id">peterson</div>
<div class="newMatch-birthdate">40 Jahre</div>
</ons-col>
<ons-col width="80px" ng-show="swipe.pass" class="pass-col col ons-col-inner">
<div class="info-unit">
<ons-icon icon="fa fa-times fa-likePass"></ons-icon>
</div>
</ons-col>
</ons-row>
<div class="newMatch">
<div ng-controller="GaugeController">
<div gauge-chart percent="matchGauge1"></div>
</div>
<ons-row>
<div class="matching-list-item-container">
<div class="heading-matching-list"><i class="fa fa-stethoscope"></i> Übereinstimmungen</div>
<div ng-controller="tagsMatchingController" class="matchingTag">
<div class="tags">
<ul class="tag-list">
<li class="tag-item">
<span class="ng-binding">Radiusfraktur</span>
</li>
<li class="tag-item">
<span class="ng-binding">Karpaltunnelsyndrom</span>
</li>
<li class="tag-item">
<span class="ng-binding">Ulnarisrinnen-Syndrom</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</ons-row>
</ons-gesture-detector>
</ons-page>
</ons-template>
<ons-template id="match2.html">
<ons-page id="match2Page">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="slidingMenu.toggleMenu()">
<ons-icon icon="bars"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Neuer Match
</div>
</ons-toolbar>
<ons-gesture-detector ng-swipeleft="onGestureMatch2('Swipe Left')" ng-swiperight="onGestureMatch2('Swipe Right')">
<div class="newMatch">
<div class="newMatch-id">findus</div>
<div class="newMatch-birthdate">32 Jahre</div>
<div ng-controller="GaugeController">
<div gauge-chart percent="matchGauge2"></div>
</div>
<ons-row>
<div class="matching-list-item-container">
<div class="heading-matching-list"><i class="fa fa-stethoscope"></i> Übereinstimmungen</div>
<div ng-controller="tagsMatchingController" class="matchingTag">
<div class="tags">
<ul class="tag-list">
<li class="tag-item">
<span class="ng-binding">Radiusfraktur</span>
</li>
<li class="tag-item">
<span class="ng-binding">Ulnarisrinnen-Syndrom</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</ons-row>
</ons-gesture-detector>
</ons-page>
</ons-template>
</ons-navigator>