Pop-up overlay (modal) in AngularJS?

Question

I am using AngularJS to build my photography website.

II want to create a overlay dialog whenever users clicks on the image.

inside ng-view:

<div class="masonry-brick" ng-repeat="item in SouthKorea">  
     <a href=""> <img ng-click="openOverlay($event)"  ng-src="{{item}}" >  </a>
</div>

Inside index.html, where different ng-views are loaded into.

<div id="overlay">  </div>

Inside controller, I have this function

$scope.openOverlay = function (e,elem, $scope) {
            var image = angular.element(e.target);
            var overlay = angular.element('#overlay');
            overlay.append(image)
        }

My problem is that the image is removed when it's clicked, and I can't figure out how to change display style of overlay element (div#overlay) which is inside index.html.

Answer 1

UI Bootstrap, from the AngularUI team, includes a Modal directive. It also has a good number of other handy modules.