更新帶有離子觸摸事件的moment.js持續時間

我正在用Ionic構建iOS應用程序。該應用程序是一個計時器，用戶將指定一個時間限制，然後爲某個活動倒計時。我試圖實現一種交互方式，用戶將圍繞圓圈的外部拖動手柄，每次順時針旋轉將使時間限制增加一分鐘，向相反方向遞減1。更新帶有離子觸摸事件的moment.js持續時間

我有圓圈工作，在那裏你可以拖動手柄，它將堅持容器的邊界。現在我正在嘗試使用Moment.js來創建倒計時，但是我很難在觸摸事件中獲取定時器值來更新。

$scope.duration變量是我用來跟蹤計時器值。我曾嘗試使用moment().duration()方法指定持續時間對象，並將其初始化爲'00：00：00'。當我嘗試在觸摸手勢事件中更新該值時，我無法更新計時器值。我假設我要麼不明白如何正確應用Angular/Ionic中的更新後的範圍值，我不知道如何正確使用Moment.js，或者很可能 - 都是。

這裏是我的模板代碼：

<ion-view hide-nav-bar="true" view-title="Dashboard"> 
    <ion-content> 
    <div class="timer"> 
     <div class="timer-slider"></div> 
     <span class="timer-countdown"> 
     {{duration}} 
     </span> 
    </div> 
    </ion-content> 
</ion-view>

我的大控制器：

.controller('DashCtrl', function($scope, $ionicGesture) { 

    var $timer = angular.element(document.getElementsByClassName('timer')[0]); 
    var $timerSlider = angular.element(document.getElementsByClassName('timer-slider')[0]); 
    var timerWidth = $timer[0].getBoundingClientRect().width; 
    var sliderWidth = $timerSlider[0].getBoundingClientRect().width; 
    var radius = timerWidth/2; 
    var deg = 0; 
    var X = Math.round(radius * Math.sin(deg*Math.PI/180)); 
    var Y = Math.round(radius * -Math.cos(deg*Math.PI/180)); 

    var counter = 0; 
    $scope.duration = moment().hour(0).minute(0).second(0).format('HH : mm : ss'); 

    // Set timer circle aspect ratio 
    $timer.css('height', timerWidth + 'px'); 
    $timerSlider.css({ 
    left: X + radius - sliderWidth/2 + 'px', 
    top: Y + radius - sliderWidth/2 + 'px' 
    }); 

    $ionicGesture.on('drag', function(e) { 
    e.preventDefault(); 
    var pos = { 
     x: e.gesture.touches[0].clientX, 
     y: e.gesture.touches[0].clientY 
    }; 
    var atan = Math.atan2(pos.x - radius, pos.y - radius); 
    deg = -atan/(Math.PI/180) + 180; // final (0-360 positive) degrees from mouse position 
    // for attraction to multiple of 90 degrees 
    var distance = Math.abs(deg - (Math.round(deg/90) * 90)); 
    if (distance <= 5 || distance >= 355) 
     deg = Math.round(deg/90) * 90; 

    if(Math.floor(deg) % 6 === 0) { 
     console.log(Math.floor(deg)); 
     $scope.duration = moment().hour(0).minute(0).second(counter++).format('HH : mm : ss'); 
    } 

    if (deg === 360) 
     deg = 0; 

    X = Math.round(radius * Math.sin(deg * Math.PI/180)); 
    Y = Math.round(radius * -Math.cos(deg * Math.PI/180)); 

    $timerSlider.css({ 
     left: X + radius - sliderWidth/2 + 'px', 
     top: Y + radius - sliderWidth/2 + 'px' 
    }); 
    }, $timerSlider); 
})

我砍死了CodePen演示。如果沒有移動格式，它不會很好地跟蹤拖動事件，但是您可以瞭解我要做什麼。

http://codepen.io/stat30fbliss/pen/xZRrXY

這裏正在進行的應用程序的截圖