why is the AngularUI bootstrap datepicker not popping up?

Question

trying out angularUI bootstrap's popup datepicker demo. Demo embedded in their page works, but my minimal plunker does not - button click does not popup the calendar. Any idea why?

JS:

  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
    console.log('opened is now: %s', $scope.opened);
  };

HTML:

   <h4>Popup</h4>
    <div class="row">
      <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" ng-model="dt" is-open="opened">
          <span class="input-group-btn">
                <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
        </p>
      </div>
    </div>

Answer 1

The problem is because you didn't supply datepicker-popup the format for the datepicker popup in your ng-model="dt" input.

simply change this

<input type="text" class="form-control" ng-model="dt" is-open="opened">

to this

<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened">

Check this working plunker .