Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css">
<div ng-controller="MyCtrl">
  <form name="form" novalidate data-ng-submit="TradeDaysFormSubmit()">
    <div data-ng-repeat="tradeDay in tradeDays">
        {{ tradeDay }}
        <br />
        <div inline-calender class="trade-calender-box" date="tradeDay.date" data-ng-model="tradeDay.date"></div>
    </div>
</form>
</div>

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.tradeDays = [];

    $scope.tradeDays.push('31-01-2013','01-01-2013');

}

myApp.directive("inlineCalender", function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            date:'='
        },
        link: function (scope, element, attributes, modelController) {
            scope.$watch('date', function (newValue) {
                if (!_.isString(newValue)) return;

                dateparts = scope.date.split('-');

                var minDate = new Date(dateparts[2], parseInt(dateparts[1]) - 1, 1);
                var maxDate = new Date(dateparts[2], parseInt(dateparts[1]), 0);

                element.datepicker({ defaultDate: scope.date, hideIfNoPrevNext: true, minDate: minDate, maxDate: maxDate });

                element.bind("change", function (event) {
                    var currentDate = element.datepicker("getDate");
                    scope.date = currentDate;
                    modelController.$setViewValue(currentDate.toString());
                    modelController.$render();
                    scope.$apply();
                });
            });
        }
    }
});