       <div class='color-brewer-container'>
         <color-brewer-palette 
           ng-repeat='(name, palette) in palettes'
-          cb-palette='palette'
-          cb-horizontal='horizontal'
-          cb-size='size'
-          cb-range='palette.length'
+          cb-palette-name='{{ name }}'
+          cb-horizontal='{{ true }}'
+          cb-size='{{ size }}'
+          cb-range='{{ palette.length }}'
           class='palette'
           ng-click='callback({paletteName: name, palette: palette})'
         />

    scope:
      parentCallback: '&cbPickerCallback'
      size: '@cbSize'
      horizontal: '=cbHorizontal'
    template: '''
      <div class='palette-selector' 
        ng-click='toggleList()'
      >
        <color-brewer-palette 
          cb-palette='selectedPalette'
          cb-horizontal='true'
          cb-size='20'
          cb-range='selectedPalette.length'
          class='palette'
        ></color-brewer-palette>
        <span class='caret'></span>
      </div>

      <color-brewer-picker 
        cb-picker-callback='callback(paletteName, palette)'
        cb-horizontal='true'
        cb-size='20'
        ng-show='showList'
      />
    '''
    link: (scope) ->
      scope.selectedPalette = []

      scope.callback = (paletteName, palette) ->
        scope.parentCallback({paletteName: paletteName, palette: palette})
        scope.selectedPalette = palette
        scope.showList = false

      scope.showList = false

do(angular) ->
  # a palette
  angular.module('colorBrewer').directive 'colorBrewerPalette', (colorBrewer) ->
    restrict: 'E'
    scope:
      paletteName: '@cbPaletteName'
      size: '@cbSize'
      horizontal: '@cbHorizontal'
      range: '@cbRange'
    template: '''
      <svg 
        ng-attr-width='{{ horizontal ? size * range : size }}' 
