title: Angularjs: how to find an element based on a data-attribute value?
body: <p>I've got the following directive: </p>
  
  <pre><code>template: '&lt;div data-div="outer"&gt;&lt;div data-div="inner"&gt;&lt;/div&gt;&lt;/div&gt;',
  link: function postLink(scope, elem, attrs) {
         var outer = elem.find('[data-div="outer"]');
         var inner = elem.find('[data-div="inner"]');
         outer.css({
             'background': 'red',
             'width': "100%",
             'height': "100%",
         });
         inner.css({
             'background': 'blue',
             'width': "50%",
             'height': "100%",
         });
      }
  </code></pre>
  
  <p>Based on <a href="https://stackoverflow.com/questions/4191386/">this post</a>, i tried these selectors. but im using jQLite, not JQuery. </p>
  
  <p>so, how to find an element based on a data-attribute value?</p>
  
  <p><a href="http://plnkr.co/edit/FeJWvwnKjOZwAIABigtA?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/FeJWvwnKjOZwAIABigtA?p=preview</a></p>