How to use events in AngularJS Bootstrap Colorpicker

Question

I can't figure out, how events work with Angular Bootstrap Colorpicker. Here is a Plunker I forked from the developer example. Sadly, the developer made no example for using events.

Events like colorpicker-selected, colorpicker-selected-saturation, colorpicker-selected-hue, colorpicker-selected-alpha, colorpicker-shown, colorpicker-closed should be supported. Just one example would be nice.

Base code without any events:

'use strict';

angular.module('colorApp', ['colorpicker.module'])
  .controller('MainCtrl', ['$scope', function($scope) {

    $scope.nonInput = {
      color: ''
    };

    $scope.resetNonInputColor = function() {
      $scope.nonInput = {
        color: '#ffffff'
      };
    };
}]);

Answer 1

Given that you have an ngModel attached (which seems to be required, per the source code), you simply catch the emitted event with $on in an ancestor of the directive.

$scope.$on('colorpicker-shown', function(event, colorObject){
     console.log(colorObject);
});

All of the events that you asked about (colorpicker-selected-alpha, etc.) are available using their original names.