using ng-change on datepicker angularjs - angularjs

Question

i am creating a web app in which i want to show the date in console on ng-change of my datepicker textbox
here is my code
<div class="form-group">
<h3>Enter Date</h3>
<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input class="form-control" ng-model="mddate" ng-blur="chngDate(mddate)" type="text" readonly />
</div>
<style>
label {
margin-left: 20px;
}
#datepicker {
width: 180px;
margin: 0 20px 20px 20px;
}
#datepicker > span:hover {
cursor: pointer;
}
</style>
<script>
$(function () {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true
}).datepicker('update', new Date());;
});
</script>
</div>
but the problem is ng-change is not working with bootstrap datepicker,
here is my function inside controller
$scope.chngDate = function (date) {
var dates = new Date();
console.log(dates);
}
and i tried to use $watch function on the particular textbox but this is not working either
$scope.$watch('mddate', function (newValue, oldValue) {
console.log('oldValue=' + oldValue);
console.log('newValue=' + newValue);
//do something
});
this is showing undefined value at first then the function is not executing
what i need to do?

Answer 1

use ng-blur instead of ng-change, its working for me