how to bind Bootstrap-datepicker element with angularjs ng-model?

As @lort suggests, you cannot access the datepicker model from your controller because the datepicker has its own private scope.

If you set: ng-model="parent.checkOut"

and define in the controller: $scope.parent = {checkOut:''};

you can access the datepicker using: $scope.parent.checkOut

I am using bootstrap 3 datepicker https://eonasdan.github.io/bootstrap-datetimepicker/ and angularjs, I had the same problem with ng-model, so I am getting input date value using bootstrap jquery function, below is the code in my controller, it's worked for me.

Html

<input class="form-control" name="date" id="datetimepicker" placeholder="select date">

Controller

$(function() {    //for displaying datepicker    $('#datetimepicker').datetimepicker({        viewMode: 'years',        format: 'DD/MM/YYYY',    });    //for getting input value    $("#datetimepicker").on("dp.change", function() {        $scope.selecteddate = $("#datetimepicker").val();        alert("selected date is " + $scope.selecteddate);    }); });

I just found a solution to this myself. I just pass in the model name to the directive (which I found most of online). This will set the value of the model when the date changes.

<input data-ng-model="datepickertext" type="text" date-picker="datepickertext" />{{datepickertext}}    angular.module('app').directive('datePicker', function() {    var link = function(scope, element, attrs) {        var modelName = attrs['datePicker'];        $(element).datepicker(            {                onSelect: function(dateText) {                    scope[modelName] = dateText;                    scope.$apply();                }            });    };    return {        require: 'ngModel',        restrict: 'A',        link: link    }});