Javascript 计数器的中间值

请帮助修复脚本

悬停时。按钮悬停以增加计数器的值。但当光标离开屏幕时，计数器的值会显示在屏幕上。按钮悬停。用户只看到计数器的初始值和最终值

我希望用户看到中间值

控制器代码：

var app = angular.module("moduleCounter", []);

app.controller("controllerCounter", function ($scope){
    $scope.counter = 0;

    $scope.incrementCounter = function(){
        $scope.startNext = setInterval(function(){
            $scope.counter++;
        }, 400);
    }

    $scope.stopCounter = function(){
        clearInterval($scope.startNext);
    }   
});

使用时，它是Angular的本机服务：

var app = angular.module("moduleCounter", []);

app.controller("controllerCounter", function ($scope , $timeout){
    $scope.counter = 0;

    $scope.incrementCounter = function(){
       $scope.setTimeout();
    }

    $scope.setTimeout = function(){
       $scope.startNext = $timeout( $scope.counterUp , 400);
    }

    $scope.counterUp = function(){
       $scope.counter++;
       $scope.setTimeout();
    }

    $scope.stopCounter = function(){
       $timeout.cancel($scope.startNext);
    }   
});

JSFiddle：