angular Spectrum directive

http://angularjs.org/

HTML

<link rel="stylesheet" href="http://bgrins.github.com/spectrum/spectrum.css">
<!-- need to control scripts order jQuery before angular is important -->
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type='text/javascript' src="http://bgrins.github.com/spectrum/spectrum.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div ng-controller="MyCtrl">
    Color: <ui-colorpicker ng-model="targetColor"></ui-colorpicker>
    <br />
    Text input: <input ng-model='targetColor' />
    <br />
    Value: {{targetColor}}
    <div class="preview" ng-style="{ backgroundColor: targetColor }"></div>
</div>

CSS

.preview {
    height:150px; 
    width: 150px; 
    border: 1px black solid;
}

JavaScript

var app = angular.module('app', []);

app.directive('uiColorpicker', function() {
    return {
        restrict: 'E',
        require: 'ngModel',
        scope: false,
        replace: true,
        template: "<span><input class='input-small' /></span>",
        link: function(scope, element, attrs, ngModel) {
            var input = element.find('input');
            var options = angular.extend({
                color: ngModel.$viewValue,
                change: function(color) {
                    scope.$apply(function() {
                      ngModel.$setViewValue(color.toHexString());
                    });
                }
            }, scope.$eval(attrs.options));
            
            ngModel.$render = function() {
              input.spectrum('set', ngModel.$viewValue || '');
            };
            
            input.spectrum(options);
        }
    };
});

app.controller('MyCtrl', function($scope) {
    $scope.targetColor = '#ebebeb';
});

angular.bootstrap(document, ['app']);