       <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})'
         />

        />
      </svg>
    '''
    link: (scope) ->
      scope.range = if scope.range? then scope.range else 0
      scope.size = if scope.size? then scope.size else 20
      scope.horizontal = if scope.horizontal? then scope.horizontal else true


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 }}' 
