Fix problem with having to double-click modal button

Author: nicklasb

angular-schema-form-complex-ui.js

@@ -80,7 +80,7 @@ angular.module('schemaForm').directive('modal', function () {
             '<div class="{{ form.htmlClass ? form.htmlClass: \'modal-dialog\'}}">' +
             '<div class="modal-content">' +
             '<div class="modal-header">' +
-            '<button type="button" class="close" ng-click="controller.toggleModal()" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+            '<button type="button" class="close" ng-click="parentController.toggleModal()" data-dismiss="modal" aria-hidden="true">&times;</button>' +
             '<h4 class="modal-title">{{ form.title }}</h4>' +
             '</div>' +
             '<div class="{{ form.fieldHtmlClass ? form.fieldHtmlClass: \'modal-body\'}} " ng-transclude></div>' +
@@ -90,7 +90,7 @@ angular.module('schemaForm').directive('modal', function () {
         restrict: 'E',
         transclude: true,
         replace: true,
-        scope: true,
+        scope: false,
         link: function postLink(scope, element, attrs) {
             scope.$watch((attrs).visible, function (value) {
                 if (value == true)

angular-schema-form-complex-ui.min.js

@@ -36,7 +36,6 @@ class ComplexUIController {
     $broadcast: any;
 
     toggleModal = function () {
-        // TODO: Fix so one do not have to click extra times to show the modal
         this.directiveScope.showModal = !this.directiveScope.showModal;
     };
 
@@ -124,7 +123,7 @@ angular.module('schemaForm').directive('modal', function () {
         '<div class="{{ form.htmlClass ? form.htmlClass: \'modal-dialog\'}}">' +
         '<div class="modal-content">' +
         '<div class="modal-header">' +
-        '<button type="button" class="close" ng-click="controller.toggleModal()" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+        '<button type="button" class="close" ng-click="parentController.toggleModal()" data-dismiss="modal" aria-hidden="true">&times;</button>' +
         '<h4 class="modal-title">{{ form.title }}</h4>' +
         '</div>' +
         '<div class="{{ form.fieldHtmlClass ? form.fieldHtmlClass: \'modal-body\'}} " ng-transclude></div>' +
@@ -134,7 +133,7 @@ angular.module('schemaForm').directive('modal', function () {
         restrict: 'E',
         transclude: true,
         replace: true,
-        scope: true,
+        scope: false,
         link: function postLink(scope: modalScope, element: JQuery, attrs: ng.IAttributes) {