Placement not working in Angular UI datepicker

In this plunk I have an Angular UI datepicker that shows up below the input field. I want the calendar to be displayed on top of the field, so I tried with popup-placement="top-left" but it doesn't work. Any ideas?

HTML

<p class="input-group">
      <input type="text" class="form-control"  ng-model="dt" is-open="opened"
           datepicker-popup="dd-MMM-yyyy" popup-placement="top-left" 
           datepicker-options="dateOptions" ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open1($event)">
           <i class="glyphicon glyphicon-calendar"></i>
        </button>
      </span>
  </p>

Javascript

var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctl', function ($scope) {


    $scope.opened = false;

    $scope.dateOptions = {
       showWeeks: false
    };


    $scope.open1 = function(event){
        event.preventDefault();
        event.stopPropagation();
        $scope.opened = true;
      };


});