How can I bind bootstrap date time picker values to an angular model

Question

How can I bind bootstrap date time picker values to an angular model

My model looks like this:

$scope.Video = {
  StartTime: '',

In my controller my date function looks like this:

    $(function() {
$("#datetimepicker1").datetimepicker();
    });

Here is my html:

<div class='input-group date'  id='datetimepicker1'  >
      <input ng-model="Video.StartTime" type='text' class="form-control" id="inputStartTime" />
     <span class="input-group-addon"><span  class="glyphicon glyphicon-calendar"></span>
      </span>
</div>

When a date is selected form my date picker the input field is populated however my angular model Video.StartTime isn't assigned the value.

I have tried adding the following to the date picker function which didn't work: $scope.Video.StartTime = $("#datetimepicker1").value;

Answer 1

you can use the datepicker directive in angular-ui project

http://angular-ui.github.io/bootstrap/

http://plnkr.co/edit/5SYeKPI0tBAbTgkXnXik?p=preview