Validation on Angular JS bootstrap DatePicker

All,

I need to implement the validation on Angular js Bootstrap DatePicker. It works for following scenarios

  1. While page is loading no validation

  2. onChange of date text box it checks for Empty and invalid date format

  3. After selecting the valid date from date picker calender it removes the error messsages mentioned in above scenario no: 2.

  4. while entering the invalid date in text box it throws "Invalid date format ".

But for the following scenarios it doesn't work.

  1. when enter the valid date it is still displaying the error message "Invalid date Format"

Here is my code snippet

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div ng-controller="DatepickerDemoCtrl">
        <pre>Date output: <em>{{dt}}</em></pre>
        <form id="main-form" name="peopleForm" novalidate>
            <div class="row">
                <div class="col-md-6">
                    <p class="form-group">
                        
                        <div ng-class="{ 'has-error': peopleForm.txtGroupExpirationDate.$invalid && peopleForm.txtGroupExpirationDate.$dirty }" class="text-right">
                            <input id="txtGroupExpirationDate" name="txtGroupExpirationDate"
                                   type="date"
                                   class="form-control"
                                   ng-model="dt"
                                   datepicker-popup="MM-dd-yyyy"
                                   is-open="false"
                                   ng-required="true" />
                            <input type="hidden" datepicker-popup="yyyy-MM-dd" ng-model="dt" is-open="opened" ng-required="true" close-text="Close" />
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                            </span>
                            <span class="help-block" ng-show="peopleForm.txtGroupExpirationDate.$error.required && peopleForm.txtGroupExpirationDate.$dirty">
                                Expiration Date can not be empty
                            </span>
                            <span class="help-block" ng-show="peopleForm.txtGroupExpirationDate.$invalid  && peopleForm.txtGroupExpirationDate.$dirty ">
                                Invalid date format
                            </span>
                        </div>
                    </p>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

here is the Example.js

angular.module('ui.bootstrap.demo',['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl',function ($scope) {
    $scope.dt = null;
    $scope.open = function ($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened = true;
        $scope.groupExpirationDate = null;
        
        console.log($scope.dt);
    };

});

So the question is how to enable the Fifth scenario?