checkboxList.js.coffee

app = angular.module 'checkboxListApp'

app.directive 'checkboxList', ->
  restrict: 'AE'
  replace: true

  scope:
    list: '='
    model: '=ngModel'

  link: (scope, element, attrs) ->
    updateMap = ->
      ids = _.pluck(scope.model, 'id').map(String)

      scope.map = _.reduce(ids, ((all, id) -> all[id] = true; all), {})

    scope.$watch 'model', updateMap

    updateMap()

    scope.update = ->
      scope.model = _.reduce scope.map, (all, state, id) ->
        if state
          id = String(id)
          found = _.find scope.list, (item) -> String(item.id) == id
          all.push found if found
        all
      , []

  template: """
    <div class="checkbox-group">
      <div class="checkbox" ng-repeat="item in list">
        <label>
          <input type="checkbox" ng-model="map[item.id]" ng-change="update()">
          {{item.name}}
        </label>
      </div>
    </div>
  """
  

template.html

<checkbox-list
 list="categories"
 ng-model="product.categories"
></checkbox-list>