title: Using .on in directive VS in controller
body: <p>What would be considered as best practice, attaching directive to element or binding event inside the controller?</p>
  
  <p><strong>Directive</strong></p>
  
  <pre><code>&lt;openread-more what-to-expand="teds-bets-readmore" /&gt;
  
  myApp.directive('openreadMore', function () {
      return {
          restrict: 'AE',
          replace: false,
          template: '&lt;a class="attach-event" what-to-expand="readmore1"&gt;Event&lt;/a&gt;&lt;/span&gt;',
          link: function (scope, elem, attrs) {
              elem.on('click', function () {
                  // attached code on click
              });
          }
      }
  });
  </code></pre>
  
  <p><strong>Just attaching it inside the controller</strong></p>
  
  <pre><code>homepageCtrls.controller('homepageCtrl', function ($scope, $http) {
      angular.element(document.querySelectorAll('.attach-event')).on('click', function () {
           // attached code on click              
      });
  });
  </code></pre>
  
  <p>The second option seems shorter and much cleaner, but i don't know if it's considered as best practice or not.</p>