<link rel="stylesheet" href="path/to/color-picker.min.css">

<script src="path/to/angular.js"></script>
<script src="path/to/color-picker.min.js"></script>

<!-- directive 的方式 -->
<font-color></font-color>

<!-- controller 的方式 -->
<div ng-controller="demoCtrl">
    <div color-picker set-color="dynamicSetColor()" class="font-color" ng-style="{'background-color': selectedForeColor}"></div>
</div>

<script>
    var myApp = angular.module('colorpickerDemo', ['ui.colorpicker']);

    // directive 的方式
    myApp.directive('fontColor', function() {
         return {
             restrict: 'E',
             scope:{},
             replace: false,
             template: '<div color-picker default-color="#ff0000" class="font-color" ng-style="{\'background-color\': selectedFontColor}"></div>',
             link: function(scope) {
                 scope.selectedFontColor = '#f00';

                 scope.$on('colorPicked', function(event, color) {
                     scope.selectedFontColor = color;
                 });
             }
         }
    })


    // controller 的方式
    myApp.controller('demoCtrl', function($scope) {
         $scope.selectedForeColor = dynamicSetColor();

         $scope.$on('colorPicked', function(event, color) {
             $scope.selectedForeColor = color;
         });

         // 动态设置默认颜色
         $scope.dynamicSetColor = dynamicSetColor;

         function dynamicSetColor() {
             return '#0f0';
         }

     });

</script>