title: Angularjs - Get element by subdirective name
body: <p>I am trying to build an expanding box.  So I setup my html as so:</p>
  
  <pre><code>&lt;div class="expand" expand-block&gt;
      &lt;label expand-button expanded="true"&gt;Style&lt;/label&gt;
      &lt;ul expand-area&gt;
          &lt;li&gt;&lt;input type="checkbox" /&gt; AWD / 4WD&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" /&gt; Commercial&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" /&gt; Convertable&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" /&gt; Coupe&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" /&gt; Hatchback&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" /&gt; Hybrid / Electric&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" /&gt; Luxury&lt;/li&gt;
          &lt;li&gt;&lt;input type="checkbox" /&gt; Sedan&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So here is my JS:</p>
  
  <pre><code>/* EXPAND BOX DIRECTIVE */
  app.directive('expandBlock', function() {
      return {
          restrict: 'A',
          link: function(scope, elem, attrs) {
              elem.find('label').bind('click', function() {
                  var some = elem.find('label').html();
                  console.log(some);
              });
          }
      };
  });
  </code></pre>
  
  <p>I want to make expand-area hide when I click the expand-button.  I can probably do this for the most part if I get the element by "label", but I'd rather access it by it's attribute and I can't seem to find a way to get to it without searching the entire DOM.</p>
  
  <p>Do I need to build a separate directive for the expand-button or can I keep this all within a single directive?  If I can keep it within a single directive, how do I get the subelement by attribute?</p>