Angular Strap image popup demo

<!DOCTYPE html>
<html ng-app="popupApp" ng-controller="AppCtrl">

  <head>
    <link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link href="style.css" rel="stylesheet" />
    <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script data-require="angular-animate@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-animate.js"></script>
    <script src="//cdn.rawgit.com/mgcrea/angular-strap/v2.1.3/dist/angular-strap.js" data-semver="2.1.3" data-require="angular-strap@2.1.3"></script>
    <script src="//cdn.rawgit.com/mgcrea/angular-strap/master/dist/angular-strap.tpl.js" data-semver="2.1.3" data-require="angular-strap@2.1.3"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <h1>Using Angular JS and Angular-Strap to create a popup image viewer</h1>
    <figure class="col-sm-4">
      <img image-popup alt="lolcat" class="img-popup-source" src="http://obeythekitty.com/wp-content/uploads/2015/01/lolcat_flying_cat.jpg" />
      <figcaption>Leaping Lolcats!</figcaption>
    </figure>
  </body>

</html>

// Include a reference to ngStrap like this
var popupApp = angular.module('popupApp', ['mgcrea.ngStrap']);

// This demo doesn't really need a controller but hey.
popupApp.controller('AppCtrl', ['$scope', function($scope) {
  
}]);

// Directive that displays an image within an Angular Strap popup.
// This directive should only be applied to an img, as it expects a 'src' attribute.
popupApp.directive('imagePopup', ['$popover', '$compile', '$window', function($popover, $compile, $window) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var myPopover = $popover(element, {
        title: attrs.popupTitle,
        template: 'angular-strap-popover-tpl.html',
        html: true,
        trigger: 'manual',
        autoClose: true,
        transclude: true,
        scope: scope,
        animation: 'am-fade'
      });

      // Toggle the popover closed when you click it
      scope.closeMe = function() {
        myPopover.toggle();
      };

      // Toggle the popover closed when you click the original smaller image.
      element.on('click', function(element) {
        myPopover.toggle();
      });
    },

    // Isolate scope, load the popup template image's src from the src attribute of the original image
    scope: {
      popupImageSrc: '@src'
    }

  }
}]);

/***
  Image popovers
***/

.popover {
  max-width: 520px;
  padding: 10px 5px 10px 5px;
  cursor: pointer;
  background-color: rgba(255,255,255,0.9);
  z-index: 100;
}

.popover-title {
  display: none;
}

.popover-content img {
  max-width: 480px;
  border: 1px solid #ddd;
  z-index: inherit;
}

.img-popup-source {
  margin-top: 7px;
  border: 1px solid #ddd;
  cursor: pointer;
}

.img-popup-source:hover {
  border: 1px solid #91a1be;
}

figcaption {
  display: block;
  font-size: 0.9em;
  font-style: italic;
  line-height: 1.15em;
  margin: 5px 0 15px 5px;
}

Angular Strap Image Popup Demo
==============================

Image popup directive using Angular JS, Angular Strap, Bootstrap styles.

<div class="popover">
  <div class="arrow"></div>
  <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
  <div class="popover-content" ng-click="closeMe()"><img ng-src="{{popupImageSrc}}"></div>
</div>