checkbox models in repeat

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <root></root>
  </body>

</html>

// Code goes here

(() => {
  angular
    .module('app', [])
    .component('root', {
      restrict: 'E',
      controllerAs: 'vm',
      template: `
        <div>
          <table>
            <thead>
              <th>name</th>
              <th>default</th>
            </thead>
            <tbody>
              <tr ng-repeat="model in vm.models">
                <td>
                  {{model.name}}
                </td>
                <td>
                  <input 
                    ng-checked="model.defaulted === true"
                    type="checkbox" 
                    ng-change="vm.setDefault($index)"
                    ng-model="model.defaulted" />
                </td>
              </tr>
            </tbody>
          </table>
        </div>  
      `,
      controller: [function() {
        this.models = [
          {name: 'blah', defaulted: false},
          {name: 'fdsf', defaulted: false},
          {name: 'cat', defaulted: false},
          {name: 'banana', defaulted: false},
          {name: 'spaghetti', defaulted: false},
          {name: '34r', defaulted: true},
        ]
        this.setDefault = (j) => this.models = this.models.map((m, i) => {
          return j === i 
            ? Object.assign({}, m, {defaulted: !m.defaulted}) 
            : Object.assign({}, m, {defaulted: false}) 
        }) 
      }]
    })

})()

/* Styles go here */

label, index, span {
  display: block;
}

input {
  margin-bottom: 15px;
}