tooltip flashes on top right of window before appearing at intended position

<!DOCTYPE html>
<html>

  <head>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js">
  </script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

<body ng-app="ui.bootstrap.demo">
  <div id="button" class="pull-right">
    <button 
      class="btn btn-danger"
      ng-controller="myPopoverCtrl"
      popover-template="myPopover.templateUrl" 
      popover-title="This is a popover" 
      popover-placement="bottom" 
      popover-is-open="myPopover.isOpen" 
      ng-click="myPopover.open()">Click me!</button>
  </div>
  <script 
          type="text/ng-template"  
          id="myPopoverTemplate.html">
    <h2 ng-bind="myPopover.data"/>
    <button
        class="btn btn-success"
        ng-click="myPopover.close()">Close me!</button>
  
  </script>
  
</body>

</html>

app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

app.controller(
  'myPopoverCtrl', ['$scope', '$timeout',
    function($scope, $timeout) {

      // query popover
      $scope.myPopover = {

        isOpen: false,

        templateUrl: 'myPopoverTemplate.html',

        open: function open() {
          $scope.myPopover.isOpen = true;
          $scope.myPopover.data = 'Hello!';
        },

        close: function close() {
          $scope.myPopover.isOpen = false;
        }
      };

    }

  ]);

/* Styles go here */