怪异的Angular控制器行为

我有一个时间框架控件，用于增加/减少某个输入，其值以月为单位。右箭头增加输入的值(即1月-> 2月)，左箭头减少输入的值，用户可以编辑输入本身以输入不同的月份。

但是，时间框架控件的行为确实很奇怪。当我点击其中一个错误时，它会将输入的值更改为""。当我再次点击时，它会转到正确的月份。当我再次点击时，它会清除输入，在清除输入和进入正确的月份之间来回切换。

例如:连续点击5次右箭头，则输入的值为:

January
""
March
""
May

这个bug可能是什么?以下是我的相关代码:

myApp.controller('TimeframeCtrl', ['$scope',
    '$cookieStore',
function ($scope, $cookieStore) {
    // Create array of month names
    var month_dictionary = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'];
    // If month cookie doesn't exist
    if ($cookieStore.get('month') == null) {
        // Create month cookie
        $cookieStore.put('month', 0);
    }
    // If year cookie doesn't exist
    if ($cookieStore.get('year') == null) {
        // Create year cookie
        $cookieStore.put('year', 2014);
    }
    // Go to the previous month
    $scope.prevMonth = function () {
        // Handle corner cases of month looping
        var month_helper = (
        $cookieStore.get('month') - 1 == -1) ? 11 : $cookieStore.get('month') - 1;
        // Update month scope variable
        $scope.month = month_dictionary[month_helper];
        // Update month cookie
        $cookieStore.put('month', month_dictionary[month_helper]);
    }
    // Go to the next month
    $scope.nextMonth = function () {
        // Handle corner cases of month looping
        var month_helper = ($cookieStore.get('month') + 1 == 12) ? 0 : $cookieStore.get('month') + 1;
        // Update month scope variable
        $scope.month = month_dictionary[month_helper];
        // Update month cookie
        $cookieStore.put('month', month_helper);
    }
    // Watch for manual editing of month
    $scope.$watch('month', function () {
        // Update month cookie
        $cookieStore.put('month', month_dictionary.indexOf($scope.month));
        // Remove warning class
        $('.month-control').removeClass('warning-input');
    });
    // Set timeframe control values
    $scope.month = month_dictionary[$cookieStore.get('month')];
    // Test whether or not form inputs are valid
    $scope.submitForm = function ($valid) {
        // If so, update graphs
        if ($valid) {
            // Update graphs
            // If not, add proper warning classes
        } else {
            if ($scope.month == undefined) {
                $('.month-control').addClass('warning-input');
            }
        }
    }
}]);

如果有人需要的HTML，我可以添加进去。非常感谢。

编辑:HTML

<form class="navbar-form pull-left" name="timeframeForm" ng-controller="TimeframeCtrl" ng-submit="submitForm(timeframeForm.$valid)">
  <div class="timeframe"><i class="fa fa-calendar fa-l"></i>Timeframe</div>
  <i class="fa fa-angle-left" ng-click="prevMonth()"></i>
  <input class="form-control month-control" type="text" value="{{month}}" placeholder="Month" ng-model="month" ng-pattern="/January|February|March|April|May|June|July|August|September|November|December/g"/>
  <i class="fa fa-angle-right" ng-click="nextMonth()"></i>
  <button class="btn btn-refresh"><i class="fa fa-refresh"></i></button>
</form>