Angular Material: md-lightbox

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/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.5.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/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="app.js"></script>
    <script src="md-screenshot.js"></script>
  </head>

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

</html>

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

var app = angular.module('plnkrApp', ['ngMaterial', 'mdLightbox']);

<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>

angular.module('mdLightbox', ['ngMaterial'])
    .directive('mdLightbox', ['$mdDialog', function($mdDialog){
	return {
		link: function($scope, elem, attrs){

			elem.addClass('image-click');

		    elem.on('click',function(){		
		    	var image = attrs.src;
		    	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();
		            };

		        }

		    }			
		}
	}
}]);