title: AngularJS custom directive for a ng-indeterminate attribute on checkboxes
body: <p>Here is a directive that handles the indeterminate state on checkboxes:</p>
  
  <pre class="lang-js prettyprint-override"><code>.directive('ngIndeterminate', function() {
      return {
          restrict: 'A',
          link: function(scope, element, attributes) {
              attributes.$observe('ngIndeterminate', function(value) {
                  $(element).prop('indeterminate', value == "true");
              });
          }
      };
  })
  </code></pre>
  
  <p>Then, for example with these data:</p>
  
  <pre class="lang-js prettyprint-override"><code>$scope.data = [
      {name: 'foo', displayed: 2, total: 4},
      {name: 'bar', displayed: 3, total: 3}
  ];
  </code></pre>
  
  <p>You would simply need:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;ul ng-repeat="item in data"&gt;
      &lt;li&gt;
          &lt;input type="checkbox" ng-indeterminate="{{item.displayed &gt; 0 &amp;&amp; item.displayed &lt; item.total}}" ng-checked="item.displayed &gt; 0" /&gt;
          {{item.name}} ({{item.displayed}}/{{item.total}})
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Is there any way to write the ng-indeterminate expression without the double-curly notation, just as the native ng-checked one?</p>
  
  <pre class="lang-xml prettyprint-override"><code>ng-indeterminate="item.displayed &gt; 0 &amp;&amp; item.displayed &lt; item.total"
  </code></pre>
  
  <p>I tried:</p>
  
  <pre class="lang-js prettyprint-override"><code>.directive('ngIndeterminate', function($compile) {
      return {
          restrict: 'A',
          link: function(scope, element, attributes) {
              attributes.$observe('ngIndeterminate', function(value) {
                  $(element).prop('indeterminate', $compile(value)(scope));
              });
          }
      };
  })
  </code></pre>
  
  <p>But I get the following error:</p>
  
  <pre class="lang-none prettyprint-override"><code>Looking up elements via selectors is not supported by jqLite!
  </code></pre>
  
  <p><a href="http://jsfiddle.net/8QFL6/">Here is a fiddle</a> you can play with.</p>