How to use events in AngularJS Bootstrap Colorpicker

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'



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){

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


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.