title: Why is $element available/injected in controller?
body: <p>In AngularJS, I've noticed that a controller is injected with <code>$element</code>, which is a JQuery/JQLite wrapper of the element the controller is controlling. For example:</p>
  
  <pre><code>&lt;body ng-controller="MainCtrl"&gt;
  </code></pre>
  
  <p>Then you can have access to the body element in the controller by injecting <code>$element</code></p>
  
  <pre><code>app.controller('MainCtrl', function($scope, $element) { ...
  </code></pre>
  
  <p>This can be seen working at <a href="http://plnkr.co/edit/Z8ob5HlX1xrNd3jdVa3V?p=preview" rel="noreferrer"><strong>this Plunkr</strong></a>.</p>
  
  <p>And seems to be confirmed as a deliberate feature in the <a href="http://docs.angularjs.org/api/ng.$compile" rel="noreferrer">docs for $compile</a> </p>
  
  <p>My questions are:</p>
  
  <ul>
  <li><p>In the light of the various guides and tutorials that suggest you shouldn't access the DOM in a controller, why is this even possible?</p></li>
  <li><p>Is there any non-hacky use case for this?</p></li>
  <li><p>Are there any examples of this being used in available code somewhere?</p></li>
  </ul>
  
  <p>Thanks.</p>