Color Picker Directive for AngularJS

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

app.controller('MainCtrl', function($scope) {
    $scope.selectColor = function(index) {
        $scope.fullCategory.color = index;
    };
    
    $scope.fullCategory = {
        price: 100,
        color: 0,
    };
});

app.directive('colorPicker', function() {
  return {
    restrict: 'E',
    scope: {
      clicker: '&',
      size: '@',
      selected: '@'
    },
    template: 
    '<div ng-repeat="color in colors">' +
        '<div class="inner" ng-class="{selected: $index==selected}" ng-style="style($index)" ng-click="clicker({index: $index})"></div>' +
    '</div>', 
    link: function(scope, elem, attr) {
      scope.colors = [
          '#4986E7',
          '#46D6DB',
          '#7AE7BF',
          '#51B749',
          '#FBD75B',
          '#FFB878',
          '#FF887C',
          '#DC2127',
          '#DBADFF'
      ];
      
      
      scope.style = function (i) {
        return {
          'background-color': scope.colors[i],
          'border-color': scope.colors[i],
          'width': scope.size,
          'height': scope.size,
          'line-height': scope.size
        };
      };
    }
  };
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script data-require="angularjs@1.6.4" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
    <link data-require="font-awesome@4.7.0" data-semver="4.7.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script>document.write("<base href=\"" + document.location + "\" />");</script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    This scope value
            <p>{{ fullCategory }}</p>
    <color-picker clicker="selectColor(index)" size="25px" selected="{{fullCategory.color}}"></color-picker>
  </body>

</html>

/* Put your css in here */

color-picker .inner {
    float: left;
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
    margin-right: 2%;
    margin-top: 2%;
    text-align: center;
}

color-picker .selected:before {
    content: '\f00c';
    display: block;
    font-family: 'fontawesome';
    color: #000;
}

color-picker .inner:hover {
  border-color: #000 !important;
}