Placement not working in Angular UI datepicker
<p><a href="http://plnkr.co/edit/waH311jBlTMiwKTkM7XY?p=preview" rel="nofollow">In this plunk</a> 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  <code>popup-placement="top-left"</code> but it doesn't work. Any ideas?</p>

<p>HTML</p>

<pre><code>&lt;p class="input-group"&gt;
      &lt;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" /&gt;
      &lt;span class="input-group-btn"&gt;
        &lt;button type="button" class="btn btn-default" ng-click="open1($event)"&gt;
           &lt;i class="glyphicon glyphicon-calendar"&gt;&lt;/i&gt;
        &lt;/button&gt;
      &lt;/span&gt;
  &lt;/p&gt;
</code></pre>

<p>Javascript</p>

<pre><code>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;
      };


});
</code></pre>