jQuery Plugin to Angular Directive

jqueryAngularDirective.html

  <input jqdaterangepicker type="text" class="form-control" ng-model="daterange" ng-change="onDateRangeChange()" /> 
  <input 
      jqdatepicker
      type="text" 
      name="dueStartDate" 
      datetime="dd-MM-yyyy" 
      data-date-format="dd-mm-yyyy" 
      class="form-control" 
      placeholder="Due Date (From)"
      ng-model="selectedEdit.field" />
  
    

  <script src="assets/js/daterangepicker.min.js"></script>
  <script src="assets/js/bootstrap-datepicker.min.js"></script>
  <script src="assets/js/bootstrap-timepicker.min.js"></script>

  <script>
  
  app.directive('jqdatepicker', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
             link: function (scope, element, attrs, ngModelCtrl) {
                element.datepicker({
                    autoclose: true,
                    todayHighlight: true,
                    minDate: 0,
                    dateFormat: 'dd-MM-yyyy',
                    onSelect: function (date) {
                        scope.date = date;
                        scope.$apply();
                    }
                });
            }
        };
    });

    app.directive('jqdaterangepicker', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
             link: function (scope, element, attrs, ngModelCtrl) {
                element.daterangepicker({
                    locale: {format: 'DD-MM-YYYY'},
                    opens: 'left',
                }, function(start, end){
                    scope.startDate = start.format('DD-MM-YYYY');
                    scope.endDate = end.format('DD-MM-YYYY');  
                    scope.$apply(); 
                });
            }
        };
    });
  
  </script>