Manifest

# app/assets/angulars/color_chart.js
//= require angular
//= require angular-ui-router
//= require angular-rails-templates
//= require prism
//= require_tree './color_chart'
Markup

<color-chart></color-chart>
Angular

# app/assets/angulars/color_chart/app.coffee
app.directive "zooluMap", [ () ->
  restrict: 'E'
  replace: 'true'
  templateUrl: 'color_chart/color-chart.html'
  controller: ($scope) ->
    @tokenize = (terms) ->
      if terms?
        tokens = terms.split(/[,\x20]/).reverse()
        tokens.splice(0,1) if tokens[0] == ""
        tokens.reduce (a, b) ->
          b = "##{b}" if b.match(/^[\da-fA-F]{3,6}$/)
          b = b.trim() if b?
          a.push(b) if( a.indexOf(b) < 0 and b != "")
          a
        ,[]
    @
  controllerAs: 'colorChartCtrl'
]
Template

<!-- app/assets/angulars/color_chart/color-chart.html.erb -->
<div class="panel panel-default">
  <div class="panel-heading form-group">
    <input type="text" class="form-control" id='terms'
          placeholder="Enter color name or code like red, green, blue, 111, 222"
          ng-model="colorChartCtrl.terms">
  </div>

  <div class="panel-body">
    <div ng-repeat='color in colorChartCtrl.tokenize(colorChartCtrl.terms)'
         class='color_box text-center' style='background-color: {{color}}'>
      <span>{{color}}</span>
    </div>
  </div>
</div>