md-lightbox

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="plnkrApp">
    <img src="http://placehold.it/350x150" lbimage="http://placehold.it/900x600" md-lightbox md-lightbox-title="Demo Plunkr">
  </body>

</html>

// Code goes here
var app = angular.module('plnkrApp', ['ngMaterial'])
  app
  .directive('mdLightbox', ['$mdDialog', function($mdDialog){
    return {
        link: function($scope, elem, attrs){

            elem.addClass('image-click');

            elem.on('click',function(){     
                var image = attrs.lbimage;
                var title = attrs.mdLightboxTitle;
                showLightboxModal(image, title);
                
            });

            //Lightbox Modal
            function showLightboxModal(image, title) {
                var confirm = $mdDialog.confirm({
                    templateUrl: 'screenshot.html',
                    clickOutsideToClose: true,
                    controller: lightboxController
                });

                $mdDialog.show(confirm);

                function lightboxController($scope, $mdDialog) {
                    $scope.image = image;
                    $scope.title = title;

                    $scope.cancel = function() {
                        $mdDialog.cancel();
                    };

                }

            }

            
        }
    }
}]);

/* Styles go here */
.image-click {
    cursor: pointer;
}

<md-dialog aria-label="Screenshot">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2 ng-if="title" ng-bind="title"></h2>
      <span flex></span>
      <md-button class="md-icon-button" ng-click="cancel()">
        <md-icon md-font-library="material-icons" aria-label="Close dialog" class="icon-static">close</md-icon>
      </md-button>
    </div>
  </md-toolbar>
  <md-dialog-content>
      <img ng-src="{{image}}" alt="{{title}}" class="demo-image">
  </md-dialog-content>
</md-dialog>