Modal image in AngularJS and UI Bootstrap 3

controller.js

$scope.openModalImage = function (imageSrc, imageDescription) {
	$modal.open({
		templateUrl: "path/to/modalImage.html",
		resolve: {
			imageSrcToUse: function () {
				return imageSrc;
			},
			imageDescriptionToUse: function () {
				return imageDescription;
			}
		},
		controller: [
		  "$scope", "imageSrcToUse", "imageDescriptionToUse",
			function ($scope, imageSrcToUse, imageDescriptionToUse) {
				$scope.ImageSrc = imageSrcToUse;
				return $scope.ImageDescription = imageDescriptionToUse;
		  }
		]
	});
};

modalImage.html

<div class="modalImage">
<div class="modal-header">
	{{selectedImg.header}}
	<button ng-click="$dismiss()" class="close pull-right" aria-hidden="true">&times;</button>

	<div class="clearfix"></div>
</div>
<div class="modal-body">
	<div class="image-wrapper">
		<a ng-href="{{ImageSrc}}" target="_blank">
			<img ng-src={{ImageSrc}}>
		</a>
	</div>
	<div class="text-muted image-description">
		{{ImageDescription}}
	</div>
</div>
</div>

style.css

.modalImage .image-wrapper {
    text-align: center;
}
.modalImage .image-wrapper img {
    max-width: 560px;
    max-height: 560px;
}
.modalImage .image-description {
    text-align: center;
    margin-top: 10px;
}

view.html

<img ng-src="{{image-1-source}}"
	alt="{{image-1-name}}"
	ng-click="openModalImage(image-1-source, image-1-name)">