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

app.controller('MainCtrl', function($scope) {
  
});

app.directive('myDatepicker',['$parse', function ($parse) {
  return {
		restrict: 'A',
		require: 'ngModel',
		link: function(scope, element, attrs, ngModel) {
			element.datepicker({
				showOn:"both",
				changeYear:true,
				changeMonth:true,
				dateFormat:'mm-dd-yy',
				minDate: new Date(),
        maxDate: new Date(2014,11,31),
				onSelect:function (dateText, inst) {
					ngModel.$setViewValue(dateText);
				}
			})
		}
	}
}]);
<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  Start <input type="text" ng-model="start" my-datepicker>
</body>
</html>
/* Put your css in here */

.some {
  border: 1px solid #cacaca;
  padding: 10px;
}