Angular-UI Bootstrap Datepicker Issue

I've been using this example to get a working Datepicker however, I can't seem to actually get the date on the Angularjs side. The first time I click on the calendar, it brings up the right date but only when I click on it again does it console.log my date. So basically, I'm doing a console.log($scope.dt) inside the $scope.open function. However, how can I get the dynamic date without having to double click on the calendar?

tl;dr if I click the calendar button and select a date, it should console.log at that point in time the date selected. I feel like this is a very simple problem that I'm overlooking.

Edit: Datepicker code - html:

 <div ng-controller="Controller">
        <div class="row">
            <div class="col-md-6">
                <p class="input-group">
                    <input class="form-control date" type="text" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" close-text="Close" ng-click="logFunction()" />
                    <span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button></span>
                </p>
            </div>
        </div>
    </div>

Inside my controller:

    $scope.logFunction = function() {
        console.log($scope.dt);
    }