modify css

css/modals.css

@@ -42,3 +42,7 @@
 .selectFiles div .controls {
   margin-left: 30px;
 }
+
+.selectFiles div.recursivedir {
+  width: 100%;
+}

index.html

@@ -23,7 +23,7 @@
   <script src="js/libs/jquery-2.2.4.min.js"></script>
   <script src="js/libs/lodash-4.17.3.min.js"></script>
 
-  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
+  <script src="js/libs/angular.min.js"></script>
 
   <script src="js/libs/angularui-bootstrap-tpls.min.js"></script>
   <script src="js/libs/bootstrap-filestyle.js"></script>
@@ -1044,7 +1044,7 @@
         <span ng-show="!folder.show" class="control-label">{{ 'click the text to expand the folder' | translate }}</span>
         <span ng-show="folder.show" class="control-label">{{ 'click the text to collapse the folder' | translate }}</span>
       </div>
-      <div ng-show="folder.show" class="form-group selectFiles" ng-include="'selectFilesCheckBox.html'" ng-init="files=folder">
+      <div ng-show="folder.show" class="form-group selectFiles recursivedir" ng-include="'selectFilesCheckBox.html'" ng-init="files=folder">
       </div>
     </div>
   </div>

js/directives/fileselect.js

@@ -48,6 +48,13 @@ app.directive("indeterminate", [
                         }
                     };
                 };
+                var passIfIsIndeterminate = function (callback) { // pass through the event from the scope where they sent
+                    return function () {
+                        if (!elem.prop("indeterminate")) {
+                            return callback.apply(this, arguments);
+                        }
+                    };
+                };
                 var catchEventOnlyOnce = function (callback) { // only fire once, and stop event's propagation
                     return function (event) {
                         callback.apply(this, arguments);
@@ -102,15 +109,13 @@ app.directive("indeterminate", [
                         var allSelected = (cacheNoSelectedSubInputNumber === 0);
                         var anySeleted = (cacheSelectedSubInputNumber > 0);
                         setIndeterminateState(allSelected !== anySeleted); // if at least one is selected, but not all then set input property indeterminate to true
-                        setModelValueWithSideEffect(allSelected);
+                        setModelValueWithSideEffect(allSelected); // change binding model value and trigger onchange event
                     };
                     // is not leaf input, Only receive child change and parent change event
-                    ngModelCtrl.$viewChangeListeners.push(passIfIsLeafChild(function () {
+                    ngModelCtrl.$viewChangeListeners.push(passIfIsLeafChild(passIfIsIndeterminate(function () {
-                        // emit when property indeterminate is set to false, prevent recursively emitting event from parent to children, children to parent
+                        // emit when input property indeterminate is false, prevent recursively emitting event from parent to children, children to parent
-                        if (!elem.prop("indeterminate")) {
+                        scope.$broadcast("ParentSelectedChange", get());
-                            scope.$broadcast("ParentSelectedChange", get());
+                    })));
-                        }
-                    }));
                     // reset input state base on children inputs
                     scope.$on("childSelectedChange", passThroughThisScope(passIfIsLeafChild(updateBaseOnChildrenState)));
                 }