How to set the initial value to ng-model when using ui-date in angularjs

My model is based off of a JSON object and the date comes in as 2012-12-13T00:00:00-07:00

I want to use the date picker ui-date.

I have the following code that works.

<input ng-model="course.startDate" value="{{item.startDate | date: 'MM/dd/yyyy'}}" ui-date ng-required="true">

However,I don't think I should be using the value="{{item.startDate | date: 'MM/dd/yyyy'}}" part but without it the input doesn't load with the value from the model.

The model is bound and functions correctly when I chose a date, it just shows up empty when the page loads.

What is the correct way to initialize this input?

Using ui-date and ng-model should be enough:

<div ng-controller="MyCtrl">
  <input ng-model="date" ui-date>
</div>

Provided that the MyCtrl is defined like this:

function MyCtrl($scope) {
    $scope.date= new Date();
}​

Here is a jsFiddle: http://jsfiddle.net/MvGFF/2/

What you must know is that the ui-date expects model value to be an instance of Date, maybe you are passing a string (or other type) value?

If your model holds values that are strings and you still want to use a date-picker you need to add the ui-date-format directive like in this example:

<input ng-model="date" ui-date ui-date-format>

where the controller is defined like so:

function MyCtrl($scope) {
    $scope.date= "2012-12-13T00:00:00-07:00";
}​

Here is a jsFiddle: http://jsfiddle.net/d4xz2/1/

This works fine :

<input type="text" ng-model="nota.fechaPub" value="{{nota.fechaPub}}" ui-date ui-date-format>

where $scope.nota.fechaPub value is "2013-01-14T23:00:00.000Z"

The value that appears in the text box is "01/15/2013"