angular-ui datepicker custom directive with parameters

Question

i am using angular-ui-datepicker to render datepicker and i am trying customize the option through js...

the directive looks like below

csapp.directive("csDateField", function () {

    //options: minViewMode, daysOfWeekDisabled, startDate, endDate
    var templateHtml = function () {
        return '<div ng-form="myform">' +
                '<div class="control-group" class="{{options.class}}">' +
                    '<div class="control-label">{{options.label}} {{ options.required ? "*" : ""}} {{options.minViewMode}} </div>' +
                    '<div class="controls">' +
                        '<div class="input-append">' +
                            '<input type="text" name="myfield" class="input-medium"  data-ng-model="ngModel" ' +
                                ' data-ng-required="options.required" data-date-min-view-mode="{{options.minViewMode}}" ' +
                                ' data-date-days-of-week-disabled="{{options.daysOfWeekDisabled}}" data-date-format="{{options.format}}" ' +
                                ' placeholder="{{options.placeholder}}" bs-datepicker >' +
                            '<button type="button" class="btn" data-toggle="datepicker"><i class="icon-calendar"></i></button> ' +
                        '</div>' +
                        '<div class="field-validation-error" data-ng-show="myform.myfield.$invalid && myform.myfield.$dirty"> ' +
                            '<div data-ng-show="myform.myfield.$error.required">{{options.label}} is required!!!</div>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>';
    };

    return {
        scope: { options: '=', ngModel: '=' },
        required: ['ngModel', '^form'],
        restrict: 'E',
        template: templateHtml,
    };
});

so what i am trying to achieve is to render datepicker like:

<cs-date-field options="birthdate" ng-model="date2"></cs-date-field>

and to pass parameters from js:

$scope.birthdate = { label: "BirthDate", required: true, minViewMode: "months" };

though the required attribute is working,, the minViewMode is not working... the value which is passed to the minViewMode parameter is: {{options.minViewMode}} rather than its actual value...

the angular version is 1.0.7. i tried using $compile like below in linking function

element.html(templateHtml());
$compile(element.contents())(scope);

but this also does not work...

Answer 1

use compile function instead of linking function example below, u can use fieldHtml function to get generated html

var compileFunction = function (element) {
        return function (scope) {
            var template = fieldHtml(scope.options);
            element.html(template);
            $compile(element.contents())(scope);
        };
    };