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

Question

I am using a datetime collector using angularjs.

My angularjs code is as follows.

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

and my opinion 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 the datetime collector does not work, perhaps because part of the view is loaded later through angularjs ajax. The input controller does not exist at run time. How can I fix this.

If I move the input controller outside of ng-app, then something like this. It works great.

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

But this is not what I'm looking for, I need to do this work with angles.

Answer 1

A problem with calendars can be fixed with

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

            });

but data binding can be another problem.

Answer 2

AngularJS, datetime .

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