title: Data binding to a Map in Angular Dart
body: <p>I'm trying to implement functionality for checking multiple items in a list of checkboxes. I am using a Map to store the data and its selected/unselected state. </p>
  
  <pre><code>List&lt;String&gt; fruits = [
    {'fruit': 'apple', 'selected': true},
    {'fruit': 'banana', 'selected': true},
    {'fruit': 'kiwi', 'selected': false}
  ];
  </code></pre>
  
  <p>The checkboxes display initially with the checked/unchecked status correctly rendered, but when I toggle a checkbox's checked status, the <code>fruits</code> map does not update. How can I correctly create a two-way binding here?</p>
  
  <p>Here is my .dart file:</p>
  
  <pre class="lang-dart prettyprint-override"><code>import 'package:angular/angular.dart';
  
  @NgDirective(
    selector: '[my-controller]',
    publishAs: 'ctrl'
  )
  class MyController {
    List&lt;String&gt; fruits = [
      {'fruit': 'apple', 'selected': true},
      {'fruit': 'banana', 'selected': true},
      {'fruit': 'kiwi', 'selected': false}
    ];
  }
  
  main() {
    ngBootstrap(module: new Module()..type(MyController));
  }
  </code></pre>
  
  <p>And here is the view markup:</p>
  
  <pre class="lang-dart prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app&gt;
    &lt;body&gt;
      &lt;div my-controller&gt;            
        &lt;ul&gt;
          &lt;li ng-repeat="item in ctrl.fruits"&gt;
            {{item['fruit']}}
            &lt;input type="checkbox" ng-model="item['selected']" /&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;!-- THIS DOES NOT UPDATE WHEN THE CHECKBOXES ARE TOGGLED --&gt;
      {{ctrl.fruits}}
  
      &lt;script type="application/dart" src="main.dart"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="packages/browser/dart.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>