Fix sub-directives compilation.

lib/molecules/select-ul/example.html

@@ -1,8 +1,9 @@
-<ln-m-select-ul ng-model="{{ngModel}}"
-                ln-options="{{lnOptions}}"
-                ln-value-field="value"
-                ln-label-field="label"
-                ln-placeholder="-- Select --"
-                ln-none="None"
-                ln-mobile-none="-- Select --">
+<ln-m-select-ul 
+  ln-model="lnModel"
+  ln-options="lnOptions"
+  ln-value-field="{{lnValueField}}"
+  ln-label-field="{{lnLabelField}}"
+  ln-placeholder="{{lnPlaceholder}}"
+  ln-none="{{lnNone}}"
+  ln-mobile-none="{{lnMobileNone}}">
 </ln-m-select-ul>

lib/molecules/select-ul/metadata.json

@@ -2,7 +2,7 @@
   "name": "ln-m-select-ul",
   "description": "Molecule - Select control which converts to a ul for styling on desktop.",
   "params": {
-    "ngModel": "VAR",
+    "lnModel": "VAR",
     "lnOptions": [{
       "value": "STRING",
       "label": "STRING"

lib/molecules/select-ul/select-ul.directive.js

@@ -1,29 +1,26 @@
-// require('@iamadamjowett/angular-click-outside');
-require( './select-ul-item.directive');
-
 angular
   .module('lnPatterns')
+  .constant('DEFAULT_DIRECTIVE', 'ln-m-select-ul-item')
+  .controller('lnMSelectUlController', lnMSelectUlController)
+  .directive('lnMSelectUlWrapper', lnMSelectUlWrapper)
+  .directive('lnMSelectUlItem', lnMSelectUlItem)
   .directive('lnMSelectUl', lnMSelectUl);
 
+//
+// lnMSelectUl
+//
 
-// angular
-//   .module('lnSelectToUl', [
-//     'angular-click-outside'
-//   ])
-//   .directive('selectToUl', selectToUl);
-
-lnMSelectUl.$inject = ['$timeout', '$sanitize', '$compile', '$sce'];
-
-function lnMSelectUl( $timeout, $sanitize, $compile, $sce ) {
+lnMSelectUl.$inject = ['$timeout', 'DEFAULT_DIRECTIVE'];
 
+function lnMSelectUl( $timeout, DEFAULT_DIRECTIVE ) {
   return {
     restrict: 'E',
     link: link,
     templateUrl: 'lnPatterns/molecules/select-ul/template.html',
-    controller: controller,
+    controller: 'lnMSelectUlController',
     controllerAs: 'vm',
     scope: {
-      ngModel: '=',
+      lnModel: '=',
       lnOptions: '=',
       lnValueField: '@',
       lnLabelField: '@',
@@ -35,49 +32,37 @@ function lnMSelectUl( $timeout, $sanitize, $compile, $sce ) {
     }
   };
 
-  function link( scope, elem ) {
-
-    var DEFAULT_DIRECTIVE = 'ln-m-select-ul-item';
-
+  function link( scope ) {
     scope.valueField = scope.lnValueField ? scope.lnValueField : 'value';
-
     scope.labelField = scope.lnLabelField ? scope.lnLabelField : 'label';
-
     scope.required = scope.lnRequired ? scope.lnRequired : false;
-
     scope.placholder = scope.lnPlaceholder ? scope.lnPlaceholder : '-- Select --';
-
     scope.none = scope.lnNone ? scope.lnNone : false;
-
     scope.mobileNone = scope.lnMobileNone ? scope.lnMobileNone : false;
-
     scope.itemDirective = scope.lnItemDirective ? scope.lnItemDirective : DEFAULT_DIRECTIVE;
-
     scope.displayOptions = false;
 
-    scope.$watch( 'lnOptions', compile );
-
     scope.getSelected = function( field ) {
       var selected = {};
 
       angular.forEach( scope.lnOptions, checkOption );
 
       if ( angular.equals({}, selected) ) {
         selected[scope.valueField] = null;
-        selected[scope.labelField] = scope.lnPlaceholder;
+        selected[scope.labelField] = scope.placholder;
       }
 
       return angular.isDefined( field ) ? selected[ field ] : selected;
 
       function checkOption( option ) {
-        if ( scope.ngModel === option[scope.lnValueField] ) {
+        if ( scope.lnModel === option[scope.lnValueField] ) {
           selected = option;
         }
       }
     };
 
     scope.setSelected = function( index ) {
-      scope.ngModel = -1 === index ? null : scope.lnOptions[index][scope.valueField];
+      scope.lnModel = -1 === index ? null : scope.lnOptions[index][scope.valueField];
       scope.hideOptions();
     };
 
@@ -96,45 +81,16 @@ function lnMSelectUl( $timeout, $sanitize, $compile, $sce ) {
     scope.showOptions = function() {
       scope.displayOptions = true;
     };
-
-    scope.getOptionHtml = function( option ) {
-      var props = '';
-
-      if ( DEFAULT_DIRECTIVE === scope.itemDirective ) {
-        props = ' ln-label="' + option[scope.labelField] + '"';
-      } else {
-        for ( var key in option ) {
-          if ( option.hasOwnProperty( key ) ) {
-            var parAttr = 'mx-' + normalize( key );
-
-            var value = angular.isObject(option[key]) ? $sanitize(angular.toJson(option[key])) : option[key];
-
-            props += ' ' + parAttr + '="' + value + '"';
-          }
-        }
-      }
-
-      return $sce.trustAsHtml( '<span ' + scope.itemDirective + props + '></span>' );
-    };
-
-    function normalize( string ) {
-      return string.replace( /_/g, '-' ).toLowerCase();
-    }
-
-    function compile() {
-      $timeout( compileElem, 2000 );
-
-      function compileElem() {
-        $compile( elem[0].querySelector('.desktop li') )( scope );
-      }
-    }
   }
 }
 
+//
+// lnMSelectUlController
+//
 
-controller.$inject = ['$document'];
+lnMSelectUlController.$inject = ['$document'];
 
-function controller($document) {
+function lnMSelectUlController($document) {
   var vm = this;
 
   vm.hasTouchSupport = isTouchSupported() && isMobile();
@@ -152,3 +108,61 @@ function controller($document) {
     return devices.test(userAgent);
   }
 }
+
+//
+// lnMSelectUlWrapper
+//
+
+lnMSelectUlWrapper.$inject = ['DEFAULT_DIRECTIVE', '$sanitize', '$compile'];
+
+function lnMSelectUlWrapper( DEFAULT_DIRECTIVE, $sanitize, $compile ) {
+  return {
+    restrict: 'A',
+    link: link,
+    scope: {
+      lnOption: '='
+    }
+  };
+
+  function link( scope, elem ) {
+    var props = '';
+
+    if ( DEFAULT_DIRECTIVE === scope.$parent.itemDirective ) {
+      props = ' ln-label="' + scope.lnOption[scope.$parent.labelField] + '"';
+    } else {
+      for ( var key in scope.lnOption ) {
+        if ( scope.lnOption.hasOwnProperty( key ) ) {
+          var parAttr = 'mx-' + normalize( key );
+
+          var value = 
+            angular.isObject(scope.lnOption[key])
+            ? $sanitize(angular.toJson(scope.lnOption[key]))
+            : scope.lnOption[key];
+
+          props += ' ' + parAttr + '="' + value + '"';
+        }
+      }
+    }
+
+    var span = $compile( '<span ' + scope.$parent.itemDirective + props + '></span>' )( scope );
+    elem.append( span );
+  }
+
+  function normalize( string ) {
+    return string.replace( /_/g, '-' ).toLowerCase();
+  }
+}
+
+//
+// lnMSelectUlItem
+//
+
+function lnMSelectUlItem() {
+  return {
+    restrict: 'A',
+    template: '<span ng-bind-html="lnLabel"></span>',
+    scope: {
+      lnLabel: '@'
+    }
+  };
+}

lib/molecules/select-ul/template.html

@@ -1,10 +1,9 @@
 <div class="select-to-ul-container" ng-class="{'hiding': hidingInProgress, 'displaying-options': displayOptions}">
   <div class="desktop" ng-show="!vm.hasTouchSupport" ng-click="toggleOptions()">
-    <span ln-m-select-ul-item
-          ln-label="{{getSelected(labelField)}}"
+    <span id="select-to-ul_{{lnPlaceholder}}"
           class="fake-select"
-          id="select-to-ul_{{lnPlaceholder}}"
-          click-outside="hideOptions()"></span>
+          ng-bind-html="getSelected(labelField)">
+    </span>
     <ul ng-show="displayOptions">
       <li ln-m-select-ul-item
           ln-label="{{none}}"
@@ -13,13 +12,14 @@
       </li>
       <li ng-repeat="option in lnOptions"
           ng-click="setSelected($index)"
-          ng-bind-html="getOptionHtml( option )">
+          ln-m-select-ul-wrapper
+          ln-option="option">
       </li>
     </ul>
   </div>
 
-  <div class="mobile" ng-show="!vm.hasTouchSupport">
-    <select ng-model="ngModel"
+  <div class="mobile" ng-show="vm.hasTouchSupport">
+    <select ng-model="lnModel"
             ng-required="{{required}}"
             placeholder="{{lnPlaceholder}}">
       <option value=""