using ng-change on datepicker angularjs

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?