Angular Web Colorpicker

Demo for angular-web-colorpicker https://github.com/twler/angular-web-colorpicker

HTML

<div ng-app="myApp">
  <div ng-controller="DemoCtrl as demo" style="margin: 10px;">
    <div web-colorpicker dab-model="demo.dabModel" dab-height="{{ demo.dabHeight }}" dab-width="{{ demo.dabWidth }}" dab-radius="{{ demo.dabRadius }}" dab-vertical="{{ demo.dabVertical }}" dab-rotate="{{ demo.dabRotate }}" show-grayscale="true"></div>
    <input type="text" ng-model="demo.dabModel" style="margin: 10px 0;">
    <div style="width: 236px; height: 100px;" ng-style="{ background: demo.dabModel }"></div>
    <div style="max-width: 300px; margin: 10px">
      Height (<span ng-bind="demo.dabHeight"></span>px)<br><input type="range" ng-model="demo.dabHeight" min=0 max=80><br>
      Width (<span ng-bind="demo.dabWidth"></span>px)<br><input type="range" ng-model="demo.dabWidth" min=0 max=80><br>
      Radius (<span ng-bind="demo.dabRadius"></span>%)<br><input type="range" ng-model="demo.dabRadius" min=0 max=50><br>
      Vertical compress (<span ng-bind="demo.dabVertical"></span>px)<br><input type="range" ng-model="demo.dabVertical" min=-30 max=30><br>
      Rotation (<span ng-bind="demo.dabRotate"></span>deg)<br><input type="range" ng-model="demo.dabRotate" min=0 max=90>
    </div>
    <a href="https://github.com/twler/angular-web-colorpicker" target="_blank" style="margin: 10px;">https://github.com/twler/angular-web-colorpicker</a>
  </div>
</div>

CSS

body {padding:10em;}

JavaScript

angular.module('web.colorpicker', [])

angular.module('web.colorpicker').directive('webColorpicker', function() {
  return {
    template: '<div>' +
      '<div ng-repeat="row in rows" ng-style="{ \'margin-left\': \'\' + row.offset*dabWidth +\'px\', height: \'\' + dabHeight - dabVertical + \'px\', \'min-width\': \'\' + 13*dabWidth + \'px\' }">' +
      '<div ng-repeat="color in row.colors" ng-click="selectColor(color)" style="display: inline-block; position: relative; cursor: pointer;" ng-style="{ \'box-shadow\': color == dabModel ? \'0 0 0 2px hsl(0, 0%, 100%),0 0 0 4px hsl(0, 0%, 15%)\' : \'none\', \'z-index\': color == dabModel ? 3 : 2, \'background-color\': color, height: \'\' + dabHeight + \'px\', width: \'\' + dabWidth + \'px\', \'border-radius\': \'\' + dabRadius + \'%\', transform: \'rotate(\' + dabRotate + \'deg)\', \'margin-top\': \'\' + dabTop + \'px\' }">' +
      '</div>' +
      '</div>' +
      '</div>',
    restrict: 'EA',
    scope: {
      dabModel: '=',
      dabHeight: '@',
      dabWidth: '@',
      dabRadius: '@',
      dabHorizontal: '@',
      dabVertical: '@',
      dabRotate: '@',
      showGrayscale: '@'
    },
    link: function(scope, ele, attrs) {

      scope.selectColor = function(color) {
      	scope.dabModel = color
      }

      scope.rows = [
        { offset: 3,    colors: ['#003366', '#336699', '#3366CC', '#003399', '#000099', '#0000CC', '#000066'] },
        { offset: 2.5,  colors: ['#006666', '#006699', '#0099CC', '#0066CC', '#0033CC', '#0000FF', '#3333FF', '#333399'] },
        { offset: 2,    colors: ['#669999', '#009999', '#33CCCC', '#00CCFF', '#0099FF', '#0066FF', '#3366FF', '#3333CC', '#666699'] },
        { offset: 1.5,  colors: ['#339966', '#00CC99', '#00FFCC', '#00FFFF', '#33CCFF', '#3399FF', '#6699FF', '#6666FF', '#6600FF', '#6600CC'] },
        { offset: 1,    colors: ['#339933', '#00CC66', '#00FF99', '#66FFCC', '#66FFFF', '#66CCFF', '#99CCFF', '#9999FF', '#9966FF', '#9933FF', '#9900FF'] },
        { offset:...