View not getting updated while updating the $scope variable

Here I tried out a code that just simply incremetns the calendar month value by 1, the code is working fine reflected by the values in console, but the view doesn't get updated. I can't get the point where I'm going wrong. Please Advise as I am not much familliar to angulars behaviour. Intention is to increment the Month on right arrow click as eg January 2015 and decrement the value on left arrow click. The code is working fine, but for the view just never updates.

View:

<div class="ctr-align btm-bdr"><a href="javascript:;"><img src="images/redarrow_bac.png" align="absmiddle" width="24" height="32" alt="" ng-click="decrMonth()"></a> &nbsp; {{month}} {{year}} &nbsp; <a href="javascript:;" ><img src="images/redarrow.png" align="absmiddle" width="24" height="32" alt="" ng-click="incrMonth()"></a></div>

{{month}} {{year}} is the UI part which doesn't get updated even if the $scope.month and the $scope.year gets updated in the js.

UI

Controller

//---------------------------- Loading next month on the arrows pressed ----------------------------------------
    // Constructor
    $scope.initJobsController           = function(){
        if(!UserServices.isLoggedIn()){
            HeaderService.setHeader(header_config.HEADER_LOGIN);
            $location.path('/login');
        }
        else{
            HeaderService.hideHeader();
            $scope.dateToday = new Date();
            $scope.setCalendarMonthHead($scope.dateToday);
            $scope.jobsLoadingTitle      = msg_config.JOBS_LOADING;
            $scope.jobsLoading           = true;
            JobsServices.getMyJobList($scope.startIndex);
            var timer= $timeout(function(){
                $scope.replaceFont();
            },0.5)
        }
    };
    // Description : Function that increments the month by 1
    $scope.incrMonth                    = function(){
        $scope.dateToday.setMonth($scope.dateToday.getMonth() + 1);
        $scope.setCalendarMonthHead($scope.dateToday);
        $scope.$apply();
    };
    // Description : Function that decrement the month by 1
    $scope.decrMonth                    = function(){
        $scope.dateToday.setMonth($scope.dateToday.getMonth() - 1);
        $scope.setCalendarMonthHead($scope.dateToday);
        $scope.$apply();
    };
    // Description : Function that decrement the month by 1
    $scope.setCalendarMonthHead         = function(date){
        var monthNames   = [ "January", "February", "March", "April", "May", "June",
                                "July", "August", "September", "October", "November", "December" ];
        $scope.month      = monthNames[$scope.dateToday.getMonth()];
        $scope.year       = $scope.dateToday.getFullYear();
        // alert($scope.month + " " + $scope.year);
    };

Even the $scope.$apply(); doesn't seem to work, tried all possiblities as mentioned here AngularJS view not updating on model change, http://jimhoskins.com/2012/12/17/angularjs-and-apply.html, angular.js: model update doesn't trigger view update as they all revolve around the use of $scope.$apply() .