How do I create a custom event in an AngularJs service

If you want to send an event between services/directives use broadcast:

$rootScope.$broadcast('buttonPressedEvent');

And recieve it like this:

$rootScope.$on('buttonPressedEvent', function () {             //do stuff        })

Any global scope based integration would hurt namespacing and could result terrible side-effects in middle and large size applications. I recommend a bit more complicated but definitely cleaner solution, using proxy service.

1. Create proxy service

angular.module('app').service('userClickingHelper', [  function() {    var listeners = [];    return {      click: function(args) {        listeners.forEach(function(cb) {          cb(args);        });      },      register: function(callback) {        listeners.push(callback);      }    };  }]);

2. Create button directive which is using the userClickingHelper as a dependency.

angular.module('app').directive('onDistributedClick', ['userClickingHelper', function (userClickingHelper) {    return {        restrict: 'A',        link: function (scope, element) {            element.on('click', userClickingHelper.click);        }    };}]);

3. Register your unrelated service with using the proxy.

angular.module('app').service('myUnrelatedService', [function (userClickingHelper) {    userClickingHelper.register(function(){        console.log("The button is clicked somewhere");    });}]);

The result is an isolated scope of event distribution, yet neither the directive, nor the service knows about each other. It is also easier to unit-test.

I am using similar solution for globally accessable "Loading" modal so I can abstract the way a controller/service is saying "user should not click or anything right now".

You can create and emit an event with the following on your element

ng-click="$emit('customEvent')"

Then in your controller you can use

$rootScope.$on('customEvent', function(){    // do something})

Demo