How to bind multiple custom events in angularjs?

Question

I need to bind custom events in angularjs(1.x) and I tried with the following code,

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://www.polymer-project.org/components/polymer/polymer.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-button/paper-button.html" rel="import">
<div ng-app="demo-app">
    <div ng-controller="DemoController">
        <template bind-angular-scope is="auto-binding">
          <paper-button raised on-tap="{{clickMe}}" on-mouseover="{{mouseOver}}">click me</paper-button>
        </template>
        <pre><code>{[{text}]}</code></pre>
    </div>
</div>

Script

<script>
angular.module('demo-app', [])
  .config(function ($interpolateProvider) {
      $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
  })
  .directive('bindAngularScope', function () {
      return {
          restrict: 'A',
          link: function (scope, element, attrs) {
              for (k in scope) {
                  if (!element[0][k]) {
                      element[0][k] = scope[k];
                  }
              }
          }
      }
  })
  .controller('DemoController', function ($scope) {
      $scope.text = '';
      $scope.clickMe = function () {
          $scope.text += '\nyou clicked me!!';
          $scope.$apply();
      };
      $scope.mouseOver = function () {
          $scope.text += '\nyou hovered me!!';
          $scope.$apply();
      }
  });
</script>

This is not working.Could you point out me the issue or Is there is any solution for binding custom events(multiple) ? Do we need to create a custom directive for each of them ?

Note:

The above code is referred from the following url,

How to bind custom events in AngularJS?

Thanks in advance!

Answer 1

angular.module('demo-app', [])
  .config(function ($interpolateProvider) {
      $interpolateProvider.startSymbol('{[{').endSymbol('}]}');
  })
  .directive('bindAngularScope', function () {
      return {
          restrict: 'A',
          link: function (scope, element, attrs) {
              for (k in scope) {
                  if (!element[0][k]) {
                      element[0][k] = scope[k];
                  }
              }

               elem.bind('click', function() {
                /* Place your click logic here * /
                 });
          }
      }
  })