title: How to write angular directive that toggles classes by selector
body: <p>I'm trying to write a directive that toggles classes based on a selector condition:</p>
  
  <pre><code>&lt;label class-when="{'is-checked': ':has(input:checked)', 'is-disabled': ':has(input:disabled)'}"&gt;
      &lt;input type="checkbox"&gt;
      Example checkbox
  &lt;/label&gt;
  </code></pre>
  
  <p>I need to somehow watch for DOM changes on the element and its descendents but I'm getting an <a href="https://docs.angularjs.org/error/ng/areq" rel="noreferrer"><code>ng:areq</code> error</a>. How can I do this?</p>
  
  <pre><code>define(function (require) {
      var _ = require('lodash');
  
      return {
          restrict: 'A',
          scope: {
              object: '@classWhen'
          },
          link: function (scope, element) {
              scope.$watchCollection(function() {
                  return element.find('*').add(element);
              }, function () {
                  _.forOwn(scope.object, function (test, classes) {
                      test = typeof test === 'boolean' ? test : element.is(test);
                      element.toggleClass(classes, test);
                  });
              });
          }
      };
  });
  </code></pre>