a simple color picker input directive in angular
<p>I have ten colors, I want to write a directive that shows 10 boxes with these colors and user picks one of these colors, I want it to be like this:
<code>colors</code> is an array of colors in hex</p>

<p> </p>

<p>Here is what I come up till now:</p>

<pre><code>(function (angular) {
    "use strict";
    angular.module('color-picker', [])
        .directive('colorPicker', function () {
            return {
                restrict: "E",
                scope: {
                    colors: "="
                },
                templateUrl: "color-picker.html",
                link: function (scope, elem, attrs) {
                    scope.setColor = function(color) {
                        scope.selectedColor = color;
                    }
                }
            }
        })

})(angular);
</code></pre>

<p>and here is the template:</p>

<pre><code>&lt;div&gt;
    &lt;div class="color-box" ng-repeat="color in colors"&gt;
        &lt;div class="color" ng-style="{'background-color': color}" ng-click="setColor(color)"&gt;
        &lt;/div&gt;
        &lt;div class="color-name text-center"&gt;
            #{{color}}
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>what should I do in order to make it <code>ngModel</code> wise? like a regular input with validation and data binding?</p>