Angular: Empty Fiddle

http://angularjs.org/

by Dekel

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="mainCtrl">

<div class='input-group date' id='datetimepickerday'>
                    <input datetimepicker class="form-control" ng-model = "compared_date"/>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
</div>

Model is: {{compared_date}}
</div>

JavaScript

$('#datetimepickerday').datetimepicker();

var myApp = angular.module('myApp',[]);

myApp.controller('mainCtrl', ['$scope', function($scope) {

  $scope.compared_date = "Compare Date";
}]);

myApp.directive('datetimepicker', function () {
  return {
    restrict: 'A',
    require : 'ngModel',
    link : function (scope, element, attrs, ngModelCtrl) {

      element.datetimepicker({});
      element.on('dp.change', function(event) { 
      	scope.$apply(function () {
          ngModelCtrl.$setViewValue(event.date.format());
        });
      })
    }
  } 
});