Angularjs Directive For Displaying an Image Overlay

app.js

var app = ng.module('app', []);
app.directive("overlay", function($rootScope) {
    return {
        restrict: 'AE',
        replace: true,
        templateUrl: 'app/modules/layout/views/overlay.html',
        link: function(scope, element, attrs){
            $rootScope.overLayImage=attrs.image;
            $rootScope.showoverlay = false;
        }
    };
});

imageDisplay.html

    <!-- Small image will be displayed on Clicking on image below it will show the same image in bigger overlay -->
    <img ng-src="" ng-click="$root.overlay_image_name=t.image_name;$root.showoverlay=true" style="width:20px;height:30px;"></img>
  
    <overlay image={{$root.overlay_image_name}}></overlay>

overlay.html

<div class="container" ng-if="$root.showoverlay">
	<i class="fa fa-close fa-2x text-right cursor overlayCloseBtn" ng-click="$root.showoverlay=false"></i>
	<div class='container overlay' >
		<img src="{{$root.overlay_image_name}}" width="40%" height=80%"></img>
	</div>
</div>

style.css

.overlayCloseBtn {
    position: fixed;
    top: 24px;
    opacity: 1;
    transition: all linear 0.5s;
    align-items: 'center';
    right: 35%;
    color: red;
    background-color: white;
}
.overlay {
  position: fixed;
  top: 42px;
  /* right: 42px; */
  opacity: 1;
  transition: all linear 0.5s;
  align-items: 'center';
  left: 31%;
}