hcientist/appointment.controller.js

## appointment.controller.js
angular.module('uitools.app', ['uitools.directives'])
.controller('AppointmentCtrl', ['$scope', function ($scope) {
    $scope.appointment = {};
    $scope.onDateSelect= function(newValue) {
      $scope.appointment.startTime = newValue;
    };
}]);

## appointment.html
<!-- my dependencies file -->
<!--
"angular": "~1.0.7",
"jquery": "~2.0.3",
"jquery-ui": "~1.10.3"
-->
<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="styles/bootstrap.min.css">
  <link rel="stylesheet" href="styles/bootstrap-datetimepicker.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.ui.datepicker.js"></script>
  <script src="js/bootstrap.js"></script>
  <script src="js/bootstrap-datetimepicker.js"></script>
</head>
<body ng-app="uitools.app">
<script src=""
<div ng-controller="AppointmentCtrl">
  <div class="input-append"
    datetimepicker="$parent.appointment.startTime"
    ondateselect="onDateSelect(date)"
    ng-model="$parent.appointment.startTime">
      <input type="text" class="input input-large" id="startTime" name="startTime" placeholder=""
        ng-model="$parent.appointment.startTime" ng-required="true"
        data-format="dd/MM/yyyy hh:mm:ss"
        ng-hide="display"/>
        <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>
  </div>
</div>
<!--1.0.7-->
<script src="components/angular/angular.js"></script>
<script src="js/bootstrap_datetime.directive.js"></script>
<script src="js/appointment.controller.js"></script>


</body>
</html>

## bootstrap_datetime.directive.js
angular.module('uitools.directives', [])
        .directive('datetimepicker', [function () {
        return {
            restrict: 'A',
            require: '?ngModel',
            link: function (scope, element, attrs, model) {
                if (!model) {
                    return;
                }
                var widgetOptions = {
                    language: 'pt-BR'
                };

                element.bind('changeDate', function (newValue) {
                    scope.$apply(function () {
                        /**only sending this if controller is set to do some other action
                         * on date select.
                         */
                        if(typeof scope.ondateselect === 'function') {
                            scope.ondateselect(newValue.localDate);
                        }
                    });
                });
                element.datetimepicker(widgetOptions);
            },
            scope: {
                ondateselect: '&'
            }
        };
    }]);
	angular.module('uitools.app', ['uitools.directives'])
	.controller('AppointmentCtrl', ['$scope', function ($scope) {
	$scope.appointment = {};
	$scope.onDateSelect= function(newValue) {
	$scope.appointment.startTime = newValue;
	};
	}]);
	<!-- my dependencies file -->
	<!--
	"angular": "~1.0.7",
	"jquery": "~2.0.3",
	"jquery-ui": "~1.10.3"
	-->
	<!doctype html>
	<html>
	<head>
	<link rel="stylesheet" href="styles/bootstrap.min.css">
	<link rel="stylesheet" href="styles/bootstrap-datetimepicker.min.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.ui.datepicker.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/bootstrap-datetimepicker.js"></script>
	</head>
	<body ng-app="uitools.app">
	<script src=""
	<div ng-controller="AppointmentCtrl">
	<div class="input-append"
	datetimepicker="$parent.appointment.startTime"
	ondateselect="onDateSelect(date)"
	ng-model="$parent.appointment.startTime">
	<input type="text" class="input input-large" id="startTime" name="startTime" placeholder=""
	ng-model="$parent.appointment.startTime" ng-required="true"
	data-format="dd/MM/yyyy hh:mm:ss"
	ng-hide="display"/>
	<span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>
	</div>
	</div>
	<!--1.0.7-->
	<script src="components/angular/angular.js"></script>
	<script src="js/bootstrap_datetime.directive.js"></script>
	<script src="js/appointment.controller.js"></script>


	</body>
	</html>
	angular.module('uitools.directives', [])
	.directive('datetimepicker', [function () {
	return {
	restrict: 'A',
	require: '?ngModel',
	link: function (scope, element, attrs, model) {
	if (!model) {
	return;
	}
	var widgetOptions = {
	language: 'pt-BR'
	};

	element.bind('changeDate', function (newValue) {
	scope.$apply(function () {
	/**only sending this if controller is set to do some other action
	* on date select.
	*/
	if(typeof scope.ondateselect === 'function') {
	scope.ondateselect(newValue.localDate);
	}
	});
	});
	element.datetimepicker(widgetOptions);
	},
	scope: {
	ondateselect: '&'
	}
	};
	}]);