From d18604012f9bf74e06e10f30f2aa5f7dea6cfcbe Mon Sep 17 00:00:00 2001
From: Brian Soumakian <bsoumakian@gmail.com>
Date: Mon, 18 Jul 2016 17:47:35 -0700
Subject: [PATCH] fix issue with un-clickable links inside modal

added link to angular modal example to showcase bug fix
---
 docs/assets/js/app.js                      | 2 +-
 docs/partials/examples-dynamic-modal2.html | 8 ++++++++
 docs/templates/modal.html                  | 2 +-
 js/angular/components/modal/modal.html     | 3 +--
 js/angular/components/modal/modal.js       | 4 ++--
 5 files changed, 13 insertions(+), 6 deletions(-)
 create mode 100644 docs/partials/examples-dynamic-modal2.html

diff --git a/docs/assets/js/app.js b/docs/assets/js/app.js
index a14eb06..820958b 100644
--- a/docs/assets/js/app.js
+++ b/docs/assets/js/app.js
@@ -321,7 +321,7 @@
         class: 'tiny dialog',
         overlay: true,
         overlayClose: false,
-        templateUrl: 'partials/examples-dynamic-modal.html',
+        templateUrl: 'partials/examples-dynamic-modal2.html',
         contentScope: {
           close: function() {
             modal.deactivate();
diff --git a/docs/partials/examples-dynamic-modal2.html b/docs/partials/examples-dynamic-modal2.html
new file mode 100644
index 0000000..828819f
--- /dev/null
+++ b/docs/partials/examples-dynamic-modal2.html
@@ -0,0 +1,8 @@
+<div class="grid-block vertical text-center">
+  <div class="grid-content">
+    <strong>This modal was created programmatically using an <a  href="https://docs.angularjs.org/guide/providers" target="_blank">Angular Factory</a></strong>
+    <br/>
+    <br/>
+    <a class="button" ng-click="close()">Close</a>
+  </div>
+</div>
diff --git a/docs/templates/modal.html b/docs/templates/modal.html
index d4fd204..20ba9a5 100644
--- a/docs/templates/modal.html
+++ b/docs/templates/modal.html
@@ -170,7 +170,7 @@ <h3>Angular-ize Your Modals</h3>
       'class': 'tiny dialog',
       'overlay': true,
       'overlayClose': false,
-      'templateUrl': 'partials/examples-dynamic-modal.html',
+      'templateUrl': 'partials/examples-dynamic-modal2.html',
       'contentScope': {
         'close': function() {
           modal.deactivate();
diff --git a/js/angular/components/modal/modal.html b/js/angular/components/modal/modal.html
index 83618db..88c37dc 100644
--- a/js/angular/components/modal/modal.html
+++ b/js/angular/components/modal/modal.html
@@ -1,9 +1,8 @@
 <div
   class="modal-overlay"
-  ng-click="hideOverlay()">
+  ng-click="hideOverlay($event)">
   <aside
     class="modal"
-    ng-click="$event.stopPropagation();"
     ng-transclude>
   </aside>
 </div>
diff --git a/js/angular/components/modal/modal.js b/js/angular/components/modal/modal.js
index 1f72060..4689bf0 100644
--- a/js/angular/components/modal/modal.js
+++ b/js/angular/components/modal/modal.js
@@ -81,8 +81,8 @@
         var overlayIn = 'fadeIn';
         var overlayOut = 'fadeOut';
 
-        scope.hideOverlay = function() {
-          if(scope.overlayClose) {
+        scope.hideOverlay = function($event) {
+          if($event.target.id == attrs.id && scope.overlayClose) {
             foundationApi.publish(attrs.id, 'close');
           }
         };