gistfile1.js

app.directive('bzColorPicker', function() {
      var evtFakeDom = $("<div>");
      return {
        restrict: 'E',
        template: "<div class='bz-color-picker' ng-click='toggle($event)'>\
                <div class='iris' style='background-color: {{ color }}'></div>\
                <i class='icon-caret-down'></i>\
                <div class='bz-color-picker-palette'>\
                   <input type='radio' class='color' ng-model='color' value='#f06548' style='background-color: #f06548'>\
                   <input type='radio' class='color' ng-model='color' value='#fdc766' style='background-color: #fdc766'>\
                   <input type='radio' class='color' ng-model='color' value='#7bc9a6' style='background-color: #7bc9a6'>\
                   <input type='radio' class='color' ng-model='color' value='#64bc93' style='background-color: #64bc93'>\
                   <input type='radio' class='color' ng-model='color' value='#4ec5da' style='background-color: #4ec5da'>\
                   <input type='radio' class='color' ng-model='color' value='#548ecb' style='background-color: #548ecb'>\
                   <input type='radio' class='color' ng-model='color' value='#97668f' style='background-color: #97668f'>\
                   <input type='radio' class='color' ng-model='color' value='#5e2974' style='background-color: #5e2974'>\
                   <input type='radio' class='color' ng-model='color' value='#f6aacb' style='background-color: #f6aacb'>\
                   <input type='radio' class='color' ng-model='color' value='#d24773' style='background-color: #d24773'>\
                </div>\
            </div>",
        replace: true,
        scope: {
          color: "=ngModel"
        },
        link: function(scope, element, attrs) {
          var isShown = false;
          scope.colors = [
            "#f06548", // poppy red
            "#fdc766", // chicky yellow
            "#7bc9a6", // turquoisy green
            "#64bc93", // 
            "#4ec5da", // sky blue
            "#548ecb", // sea blue
            "#97668f", // lilas
            "#5e2974", // dark purple
            "#f6aacb", // buta pink
            "#d24773"  // barbie pink
          ];

          var paletteEl = element.find('.bz-color-picker-palette');
          
          var show = function() {
            if (isShown) return;
            evtFakeDom.trigger("hideAll");
            element.addClass("showPalette");
            isShown = true;
          }

          var monitor = function() {
            console.log("monitor")
          }

          var hide = function() {
            if (!isShown) return;
            element.removeClass("showPalette");
            isShown = false;
          }

          scope.toggle = function($event) {
            $event.stopPropagation();
            if (isShown) {
              hide();
            }
            else {
              show();
            }
            return false;
          }

          evtFakeDom.on("hideAll", hide);
          $("body").click(function() {
            evtFakeDom.trigger("hideAll");
          })
          scope.$on("$destroy", function(nv, ov) {
            evtFakeDom.off("hideAll", hide);
          });
        }
      }
    });