title: angularjs adding my own function to the existing ng-click
body: <p>I have <code>ng-click="foo()"</code> which alert "foo"
  In my own directive, if ng-click is found, I want to add another function to alert "bar"</p>
  
  <p>I tried this<br>
  DEMO:  <a href="http://plnkr.co/edit/1zYl0mSxeLoMU3yjoGBV?p=preview" rel="nofollow">http://plnkr.co/edit/1zYl0mSxeLoMU3yjoGBV?p=preview</a></p>
  
  <p>and it did not work</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
    &lt;head&gt;
      &lt;script src="http://code.angularjs.org/1.2.7/angular.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      var app = angular.module('myApp', []);
      app.controller('MyCtrl', function($scope) {
        $scope.foo = function() { alert('foo'); }
        $scope.bar = function() { alert('bar'); }
      });
      app.directive("myAttr", function() {
        return {
          link: function(scope, el, attrs) {
            el.attr('ng-click', attrs.ngClick+';bar()');
          }
        }
      })
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="MyCtrl"&gt;
      &lt;a my-attr ng-click="foo()" href=""&gt;click here!&lt;/a&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I was also not able to another ng-* directive to this to make it work, i.e. <code>el.attr('ng-focus', 'bar()');</code>. It seems that I cannot change or add ng-* directive once it is rendered.</p>
  
  <p>How can I achieve this, and what was I doing wrong?</p>