title: a simple color picker input directive in angular
body: <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>