Angular bootstrap datepicker can not be popped up by code

I am using angular bootstrap to develop my SPA and need a date picker in my form.

I nearly copied the whole code from angular bootstrap example for a date picker. However, when I click the calendar icon, the picker will not pop up as the example. I've found that the datepicker's is-open attibute has been successfully bound to the controller's controlling variable (status.opened is this case). But when ng-click fires the controller's function (openpicker()) to set status.opened=true, that value won't change and no error is output to the console.

Can anyone help me on this? Thanks!

The HTML:

<div class='row' ng-controller='DatepickerCtrl'>
    <div class='col-lg-1'>4</div>
    <div class='col-lg-3'>birthday. {{status.opened}}</div>
    <div class='col-lg-4'>
        <p class="input-group">
        <input type="text" class="form-control" datepicker-popup ng-model='dt' is-open='status.opened' ng-required="true" close-text="Close" />
        <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click='openpicker()'><i class="glyphicon glyphicon-calendar"></i></button>
        </span>
        </p>
    </div></div>

The javascript code:

function dtctrl($scope, $timeout) {

  $scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

  $scope.clear = function () {
    $scope.dt = null;
  };

  // Disable weekend selection
  $scope.disabled = function(date, mode) {
    return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
  };

  $scope.toggleMin = function() {
    $scope.minDate = $scope.minDate ? null : new Date();
  };
  $scope.toggleMin();
  $scope.maxDate = new Date(2020, 5, 22);

  $scope.openpicker = function() {

      $scope.status.opened = true;

  };

  $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
  };

  $scope.status = {
    opened: true
  };     
}