I have written a simple datepicker directive. Here is the code :

appDirective.directive('datePicker', function() {

    return {

        restrict: 'E',

        require: ['ngModel'],

        scope: {

            ngModel: '='

        },

        replace: true,

        template:

            '<div class=input-group>'     +

                    '<input type=text  class=form-control ngModel required>' +

                    '<span class=input-group-addon><i class=glyphicon glyphicon-calendar></i></span>' +

            '</div>' ,

        link: function(scope, element, attrs) {

            var input = element.find('input');

            var nowTemp = new Date();

            var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(),0,0,0,0);

            console.log(now);

            console.log(nowTemp);



            input.datepicker({

               format: yyyy-mm-dd,

                onRender: function(date) {

                    return date.valueOf() < now.valueOf() ? 'disabled' : '';

                }

            });



            element.bind('blur keyup change', function() {

                scope.ngModel = input.val();

                console.info('date-picker event', input.val(), scope.ngModel);

            });

        }

    }

});

This triggers the datepicker if I use <date-picker></date-picker> in html.

However in the above directive the callback for onRender doesn't work. I am using the same example as Disable bootstrap dates

What am I doing wrong here ?

Thanks :)