fix issue with un-clickable links inside modal

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();

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>

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();

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>

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');
           }
         };