Merge pull request #33 from m0t0r/multicheckbox-watch-model

Watch multiCheckbox model value to support async options

Author: Kent C. Dodds

README.md

@@ -154,6 +154,52 @@ _Example checkbox field_
 }
 ```
 
+---
+#### multiCheckbox form field
+>The multiCheckbox field allows to have a set of checkboxes which will be bind to a provided model value.
+
+##### options (array, required)
+>`options` is an array of options for the multiCheckbox form field to display. Each option should be an object.
+
+##### labelProp (string, optional)
+>`labelProp` is what is used for what is shown to the user. Defaults to `name`
+
+##### valueProp (string, optional)
+>`valueProp` is what is used for the value assigned to the model. Defaults to `value`
+
+_Example multiCheckbox field_
+```json
+{
+  key: 'roles',
+  type: 'multiCheckbox',
+  templateOptions: {
+    label: 'Roles',
+    options: [{id: 1, title : "Administrator"}, {id: 2, title : "User"}],
+    valueProp: 'id',
+    labelProp: 'title'
+  }
+}
+```
+
+_Example multiCheckbox field with async options_
+```javascript
+{
+  key: 'roles',
+  type: 'multiCheckbox',
+  templateOptions: {
+    label: 'Roles',
+    options: [],
+    valueProp: 'id',
+    labelProp: 'title'
+  },
+  controller: function($scope, DataService) {
+    DataService.getRoles().then(function(roles){
+      // roles: [{id: 1, title : "Administrator"}, {id: 2, title : "User"}]
+       $scope.to.options = roles;
+    });
+  }
+}
+```
 ---
 #### Radio form field
 >The radio field allows multiple choice input with a series of linked inputs, with `type='radio'`.

src/types/multiCheckbox.js

@@ -33,13 +33,22 @@ export default ngModule => {
         };
 
         // initialize the checkboxes check property
-        const modelValue = $scope.model[opts.key];
-        if (angular.isArray(modelValue)) {
-          const valueProp = to.valueProp || 'value';
-          angular.forEach(to.options, function(v, index) {
-            $scope.multiCheckbox.checked[index] = modelValue.indexOf(v[valueProp]) !== -1;
-          });
-        }
+        $scope.$watch('model', function modelWatcher(newModelValue) {
+          var modelValue, valueProp;
+
+          if(Object.keys(newModelValue).length) {
+            modelValue = newModelValue[opts.key];
+
+            $scope.$watch('to.options', function optionsWatcher(newOptionsValues) {
+              if(newOptionsValues && Array.isArray(newOptionsValues) && Array.isArray(modelValue)) {
+                valueProp = to.valueProp || 'value';
+                for (var index = 0; index < newOptionsValues.length; index++) {
+                  $scope.multiCheckbox.checked[index] = modelValue.indexOf(newOptionsValues[index][valueProp]) !== -1;
+                }
+              }
+            });
+          }
+        }, true);
 
         function checkValidity(expressionValue){
           var valid = angular.isArray($scope.model[opts.key]) &&