Wijmo 5 - Popups (with and without owners)

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" class="container">

    <h1>Popups</h1>

    <button class="btn btn-primary" id="theButton">
      Popup with owner element
    </button>
    <wj-popup owner="#theButton">
        <h2>
          Hello!
        </h2>
        <p>
          This popup has an owner element, so it is positioned above or below the owner
          (so both are visible and clickable).
        </p>
    </wj-popup>

    <button class="btn btn-primary" ng-click="popup.show()">
      Popup without owner element
    </button>
    <wj-popup control="popup">
        <h2>
          Hello!
        </h2>
        <p>
          This popup has no owner element, so it is centered on the screen.
        </p>
    </wj-popup>

</div>

CSS

.wj-popup {
  padding: 20px;
  border: 2px solid blue;
  max-width: 300px;
}

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function($scope) {
});