crmModule.directive("some", [function() {
return {
    restrict: "E",
    replace: true,
    scope: {
        itemModel: "=model"
    },
    templateUrl: "/Static/CRMpages/user-details-templates/preview-template.html",
    link: function (scope, element, attrs) {
        if (scope.itemModel.dueDateEnabled) {
            scope.itemModel.date = scope.itemModel.dueDate.getDate();
            scope.itemModel.month = scope.itemModel.dueDate.toLocaleDateString("en", { month: "short" }).toUpperCase();
            scope.itemModel.time = scope.itemModel.dueDate.toLocaleTimeString("en", { hour: "numeric", minute: "numeric" });
        }
        scope.$watch('itemModel.dueDate', function() {
            scope.itemModel.date = scope.itemModel.dueDate.getDate();
            scope.itemModel.month = scope.itemModel.dueDate.toLocaleDateString("en", { month: "short" }).toUpperCase();
            scope.itemModel.time = scope.itemModel.dueDate.toLocaleTimeString("en", { hour: "numeric", minute: "numeric" });
        });
    }

}}])

<some model="actionModel"/>

<div class="action-plan-edit">
<div class="checkboxes col-sm-4">
    <div class="due-date-section">
        <div class="labels">
            <input  id="dueDateEnabled" type="checkbox" ng-model="actionModel.dueDateEnabled">
            <span>Set due date</span>
        </div>

        <div class="dueDate-selector" slide open="actionModel.dueDateEnabled">
            <div date-picker="actionModel.dueDate" nd-model="actionModel.dueDate" view="month" min-view="hours" max-view="month"></div>
            <div class="selected-time">
                <span class="date">{{actionModel.dueDate|itemDate}}</span>
                <span class="time">{{actionModel.dueDate|itemTime}}</span>
            </div>
        </div>

    </div>
    <div class="booking-section">
        <div class="labels">
            <input  id="bookingAttached" type="checkbox" ng-model="actionModel.bookingEnabled">
            <span>Attach booking</span>
        </div>

        <div class="booking-attachment-area" slide open="bookingEnabled">
            <select></select>
            <select></select>
        </div>
    </div>
    <div class="sms-section">
        <div class="labels">
            <input id="smsEnabled" type="checkbox" ng-model="actionModel.smsEnabled" >
            <span>Send sms to client</span>
        </div>
    </div>



</div>
<div class="result-preview col-sm-6">
    <div class="input-section">
        <textarea class="crm-text-area" ng-model="actionModel.description" placeholder="Action description.."></textarea>
    </div>
    <div class="bordered-block">
         <p class="preview-header">Live preview of action item</p>
        <some model="actionModel"/>
    </div>

    <div class="save-button-section">
        <button class="save-button" ng-click="saveItem()" ng-disabled="!itemValid">Save</button>
    </div>