JQuery Datetime picker plugin does not work with AngularJS in ng-view

Question

I am using datetime picker with angularjs.

My angularjs code looks like this.

<div id="bodyContainer">                
   <div ng-app="tb">           
      <div ng-view></div>
   </div>
</div>

and my view looks like this.

<div class="control-group" ng-class="{error: myForm.bdatetime.$invalid}">
   <label class="control-label" for="bdatetime">Date Time</label>
   <div class="controls">
     <input type="text" ng-model="bdatetime" name="bdatetime" id="datetimepicker" required/>
     <span ng-show="myForm.bdatetime.$error.required" class="help-inline">Required</span>
   </div>
</div>

and datetime picker is not working, It may be because view part is loading later via angularjs ajax. input controller does not exist at the time of script execution. How can I fix it.

If i move input controller outside of ng-app something like this. it perfectly works.

<div id="bodyContainer">  
   <input type="text" id="datetimepicker" />              
   <div ng-app="tb">           
      <div ng-view></div>
   </div>
</div>

But this is not what I am looking for, I need to make this work with angularjs.

Answer 1

Calender problem can be fixed using

  $(document).on("focus","#datetimepicker", function() {                    
                $('#datetimepicker').datetimepicker({
                    format: 'd/m/Y H:i',
                });

            });

but data binding could be another issue.

Answer 2

Move Below code into AngularJS Controller and datetime picker will work fine with angularjs.

$('#datetimepicker').datetimepicker({
                        format: 'd-m-Y H:i',
                        onChangeDateTime:function(dp,$input){
                            $scope.bdatetime = $input.val();                                                        
                            $scope.$apply();
                        }
                    });