title: angular bootstrap dropdown to open on left
body: <p>I have used angular bootstrap dropdown successfully <a href="https://angular-ui.github.io/bootstrap/">link</a>.
  But the problem it that the dropdown opens on the right side.
  How can i make it to open on left?
  Here is the markup and js i used from the given link.</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div ng-controller="DropdownCtrl"&gt;
  &lt;!-- Single button with keyboard nav --&gt;
  &lt;div class="btn-group" uib-dropdown keyboard-nav&gt;
      &lt;button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" uib-dropdown-toggle&gt;
          Dropdown with keyboard navigation &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav"&gt;
          &lt;li role="menuitem"&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
          &lt;li role="menuitem"&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
          &lt;li role="menuitem"&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li role="menuitem"&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
  $scope.items = [
  'The first choice!',
  'And another choice for you.',
  'but wait! A third!'
  ];
  
  $scope.status = {
  isopen: false
  };
  
  $scope.toggled = function(open) {
  $log.log('Dropdown is now: ', open);
  };
  
  $scope.toggleDropdown = function($event) {
  $event.preventDefault();
  $event.stopPropagation();
  $scope.status.isopen = !$scope.status.isopen;
  };
  
  $scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content'));
  });
  </code></pre>
  
  <p>please help</p>