title: UI-Bootstrap Popover goes off the screen
body: <p>I'm using the Ui-bootstrap popover from <strong>UI Bootstrap</strong> (AngularJS).</p>
  
  <p>and the popover in the border of the page seems to get out of the screen...</p>
  
  <p>Is there a better way to position the popover - so it could stay inside the screen? </p>
  
  <p>as you can see popover is cut...</p>
  
  <p><a href="https://i.stack.imgur.com/dYSNh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dYSNh.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
  angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) {
    $scope.dynamicPopover = {
      content: 'Hello, World!',
      templateUrl: 'myPopoverTemplate.html',
      title: 'Title'
    };
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html ng-app="ui.bootstrap.demo"&gt;
    &lt;head&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"&gt;&lt;/script&gt;
      &lt;script src="example.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div ng-controller="PopoverDemoCtrl"&gt;
        &lt;h4&gt;Dynamic&lt;/h4&gt;
        &lt;div class="form-group"&gt;
          &lt;label&gt;Popup Text:&lt;/label&gt;
          &lt;input type="text" ng-model="dynamicPopover.content" class="form-control"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label&gt;Popup Title:&lt;/label&gt;
          &lt;input type="text" ng-model="dynamicPopover.title" class="form-control"&gt;
        &lt;/div&gt;
        &lt;div class="form-group"&gt;
          &lt;label&gt;Popup Template:&lt;/label&gt;
          &lt;input type="text" ng-model="dynamicPopover.templateUrl" class="form-control"&gt;
        &lt;/div&gt;
        &lt;button uib-popover="{{dynamicPopover.content}}" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default"&gt;Dynamic Popover&lt;/button&gt;
  
        &lt;button uib-popover-template="dynamicPopover.templateUrl" popover-title="{{dynamicPopover.title}}" type="button" class="btn btn-default"&gt;Popover With Template&lt;/button&gt;
  
        &lt;script type="text/ng-template" id="myPopoverTemplate.html"&gt;
          &lt;div&gt;{{dynamicPopover.content}}&lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label&gt;Popup Title:&lt;/label&gt;
            &lt;input type="text" ng-model="dynamicPopover.title" class="form-control"&gt;
          &lt;/div&gt;
        &lt;/script&gt;
        &lt;hr /&gt;
        &lt;h4&gt;Positional&lt;/h4&gt;
        &lt;button popover-placement="top" uib-popover="On the Top!" type="button" class="btn btn-default"&gt;Top&lt;/button&gt;
        &lt;button popover-placement="left" uib-popover="On the Left!" type="button" class="btn btn-default"&gt;Left&lt;/button&gt;
        &lt;button popover-placement="right" uib-popover="On the Right!" type="button" class="btn btn-default"&gt;Right&lt;/button&gt;
        &lt;button popover-placement="bottom" uib-popover="On the Bottom!" type="button" class="btn btn-default"&gt;Bottom&lt;/button&gt;
  
        &lt;hr /&gt;
        &lt;h4&gt;Triggers&lt;/h4&gt;
        &lt;p&gt;
          &lt;button uib-popover="I appeared on mouse enter!" popover-trigger="mouseenter" type="button" class="btn btn-default"&gt;Mouseenter&lt;/button&gt;
        &lt;/p&gt;
        &lt;input type="text" value="Click me!" uib-popover="I appeared on focus! Click away and I'll vanish..."  popover-trigger="focus" class="form-control"&gt;
  
        &lt;hr /&gt;
        &lt;h4&gt;Other&lt;/h4&gt;
        &lt;button popover-animation="true" uib-popover="I fade in and out!" type="button" class="btn btn-default"&gt;fading&lt;/button&gt;
        &lt;button uib-popover="I have a title!" popover-title="The title." type="button" class="btn btn-default"&gt;title&lt;/button&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://plnkr.co/edit/QQxfc4BlHceJwt8zulKu?p=preview" rel="noreferrer">http://plnkr.co/edit/QQxfc4BlHceJwt8zulKu?p=preview</a></p>