AngularJS data binding not working with ui-date component

Question

I'm using the ui-date component as a dropdown datepicker in an AngularJS project. The problem I'm having is that the data binding between the model and the datepicker is only one-way, not two-way as I expect it to be.

My HTML has a Prev and Next button to allow the user to adjust the date backwards and fowards one day at a time. Or they can click in the date box itself to show the dropdown datepicker and specify any date they want.

Plunker here.

HTML:

ThisDate: {{ ThisDate }}
<p>
<button ng-click="PrevDay()">&lt; Prev</button>
<button ng-click="NextDay()">Next &gt;</button>
<p>
Set Date: <input ui-date ng-model="ThisDate" id="ThisDate">

Javascript:

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

app.controller('MyController', function($scope) {
    $scope.ThisDate = new Date();

    $scope.PrevDay = function() {
        $scope.ThisDate = DateOffset($scope.ThisDate, -1);
    };

    $scope.NextDay = function() {
        $scope.ThisDate = DateOffset($scope.ThisDate, 1);
    };

    function DateOffset(ThisDate, NumDays) {
        var d = ThisDate;
        d.setDate(d.getDate() + NumDays);
        return d
    }
});

Problem:

If you change the date using the dropdown datepicker, the date box will change and {{ ThisDate }} will update properly. But if you click the Prev or Next buttons, only the bound {{ ThisDate }} will change... not the date box which is bound to "ThisDate" in the model.

Steps to Reproduce:

Run the Plunker. Notice that if you click in the date box, you can change the date from the dropdown and the date box will change accordingly AND the text area at the top which is bound to ThisDate will also change. Now click the Next or Prev button. Notice that ONLY the bound ThisDate text will change, NOT the date box. The date box should also change since it is bound to ThisDate.

Any ideas on why the ui-date datepicker isn't registering the changes in the model to ThisDate?

Plunker here.

Answer 1

It's not seeing the date object change. If you assign a new date object it works:

function DateOffset(ThisDate, NumDays) {
    var d = new Date();
    d.setTime(ThisDate.getTime() + (NumDays * 1000 * 60 * 60 * 24));
    return d
}