Using bootstrap-datetime picker with AngularJS
Not all jQuery plugins work right out of the box with Angular. Angular isn't observing the input for "outside" changes, because it expects the value to only change if (a) the user changes it, or (b) it's changed by the controller. Angular code certainly be modified to monitor changes to the value of the input, but performance would likely suffer as a result.
I've replicated the problem you're seeing here: http://jsfiddle.net/kf4Xt/
If you want to get away from your "hack" (pulling the date from .val() manually), you're going to need to wrap this plugin in a directive and use that directive. Doing it this way would be more inline with Angular and you'd be doing it "The Angular Way".
The directive should be responsible for calling $(element).datetimepicker(), and providing the chosen value via a bi-directional binding.
The AngularStrap project is doing exactly this with a lot of the Twitter Bootstrap plugins, so you could check their source how to see how it's being done.
Since, My project also depends upon jQuery, I did the following to make it work in my controller
transaction.date = $('.form_datetime input').val()On console.log, I see
Resource {name: "OneMore", debit: "True", date: "2013-05-08T12:27:50", amount: "123", category: "79128f9a-74ab-4c63-b60e-4934aa367575"…I do not know any better technique at the moment so unblocked myself, if someone knows an angular way, please let me know
I know that this is kind of old, but as long as you have answered yourself with a workaround solution and asked to let you know about an angular way, here is what I think that you were looking for:
It is styled with Twitter Bootstrap, but I think that this won't be a problem.