Angular select box not working on first change

I have angular directive that replaces original element with 2 select boxes and makes isolate scope. However, select box is not working first time i change it, works fine after that.

Here is example code:

app.directive('dayMonth', function () {
return {
    restrict: 'A',
    scope: {
        ngModel: '='
    },
    template: '<div>'+
                '<select ng-change="changeDate()" ng-model="month" ng-options="item.number as item.name for item in months" ></select>'+
                '<select ng-change="changeDate()" ng-model="day" ng-options="item for item in Range(1,months[month].days)" ></select>'+
              '</div>',
    replace: true,
    controller: function ($scope) {

        $scope.months = [
            {'number':0,'name':'Month','days':28},
            {'number':1,'name':'January','days':31},
            {'number':2,'name':'February','days':28},
            {'number':3,'name':'March','days':31},
            {'number':4,'name':'April','days':30},
            {'number':5,'name':'May','days':31},
            {'number':6,'name':'June','days':30},
            {'number':7,'name':'July','days':31},
            {'number':8,'name':'August','days':31},
            {'number':9,'name':'September','days':30},
            {'number':10,'name':'October','days':31},
            {'number':11,'name':'November','days':30},
            {'number':12,'name':'December','days':31},
        ];

        $scope.ngModel = '0.0.';
        $scope.month = 0;
        $scope.day = 0;

        $scope.$watch('ngModel', function(val) {
            if (val) {
                var monthDay = val.split('.');

                if ( monthDay.length >= 2 ) {
                    $scope.month = parseInt( monthDay[1] );
                    $scope.day = parseInt( monthDay[0] );
                }
            }

        });

        $scope.changeDate = function () {
            $scope.ngModel = $scope.day + '.' + $scope.month + '.';
        };

        $scope.Range = function(start, end) {
            var result = [];
            for (var i = start; i <= end; i++) {
                result.push(i);
            }
            return result;
        };

    }
}
});

Also, here is the example plunker