title: Angularjs - ng-click function vs directive
body: <p>I can't decide which method to use in following case. I'm trying to alert when clicking on buttons. I can do this using 2 methods. Which is the best practice and please tell me why? </p>
  
  <p><strong>Method 1</strong></p>
  
  <pre><code>&lt;div ng-app="app"&gt;
    &lt;button alert&gt;directive&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>var app = angular.module('app', ['ngRoute']);
  
  app
    .directive('alert', function(){
      return {
  
        link: function(scope, element, attr) {
              element.on('click', function(){
            alert('clicked');
          })
        }
  
      }
    })
  </code></pre>
  
  <p><strong>Method 2</strong></p>
  
  <pre><code>&lt;div ng-app="app" ng-controller="MainCtrl"&gt;
    &lt;button ng-click="go()"&gt;ng-click&lt;/button&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>app.controller('MainCtrl', ['$scope', function($scope) {
  
    $scope.go = function() {
      alert('clicked');
    }
  }]);
  </code></pre>
  
  <p>Thank you,
  Rushan</p>