Deepankar Bajpeyi Deepankar Bajpeyi - 9 months ago 65
AngularJS Question

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

Here is the html for the date field :

<div class='form-group'>
<label>Check out</label>
<input type='text' ng-model='checkOut' class='form-control' data-date-format="yyyy-mm-dd" placeholder="Check out" required id="check-out">

The datepicker shows up in the input field. However if I do this in my controller :


I get
undefined in the javascript console
How to solve this ?

Is there a better way to use

I don't want to use
since my project is bloated with javascript libraries.

Answer Source

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