title: How to pre-select checkbox in angularJs with ng-checked
body: <p>I seem to cannot get this to work. So I have a bunch of genres of movies which I want them to be checked if those are the genres in user database. This is my code</p>
  
  <pre>
  <code>
  %section(ng-controller="UserCtrl" ng-init="user_genres=#{preferred_genres}")
      %ul
           %li(ng:repeat="genre in preferred_genres")
              %input(type = "checkbox" ng:model="preferred_genres[genre]" id="genre-{{$index + 1}}" ng-checked="user_genres['{{genre}}']")
              %label{:for => "genre-{{$index + 1}}"} {{genre}}
  </code>
  </pre>
  
  <p>And this is <code>#{preferred_genres}</code> from haml</p>
  
  <pre>
  <code>
  {"Action & Adventure":true,"Animation":true,"Art House & International":true,"Classics":true,"Comedy":true,"Documentary":true,"Drama":true,"Horror":true,"Kids & Family":true,"Musical & Performing Arts":true,"Mystery & Suspense":true,"Romance":true,"Science Fiction & Fantasy":true,"Special Interest":true,"Sports & Fitness":true,"Television":true,"Western":true}
  </code>
  </pre>
  
  <p>So that means every checkbox should be checked. But no checkbox is checked when I load the page. However if I hardcode <code>ng-checked</code> to be something like this it works.</p>
  
  <pre>
  <code>
  ng-checked="user_genres['Western']"
  </code>
  </pre>
  
  <p>This is really strange. Please help.</p>