color-pick.js

export default {
  bindings: {
    colors: '<',
    selector: '@'
  },
  templateUrl: 'views/color-picker.html',
  controller: class {

    //@ngInject
    constructor($window, $timeout) {
      this.$ = $window.$
      this.display = true
    }

    $doCheck() {
      this.$('.pallete > [data-color]').draggable({
        appendTo: 'body',
        revert: 'invalid',
        helper: 'clone',
        containment: 'window',
        start: event => {
          this.color = $(event.toElement).attr('data-color')
        }
      })
      this.$(this.selector).droppable({
        tolerance: 'pointer',
        greedy: true,
        accept: '[data-color]',
        drop: event => this.$(event.target).css({ [ $(event.target).attr('wf-custom') ]: this.color })
      })
    }

  }
}

view.pug

.color-pick(ng-if='$ctrl.display')
  ul.pallete
    li(ng-repeat='(name, color) in $ctrl.colors', data-color='{{ color }}', ng-style="{ background: color }", ng-click='$ctrl.color = color')
button.btn-color-picker(ng-style='{ color: "#1565C0" }', ng-click='$ctrl.display = !$ctrl.display') !{'\uf1fc'}