How to add a checkbox for lists

Question

so I am trying to add a checkbox for each contact in the list. This is what i have for now, but the checkboxes are not showing next to the contact names for some reason!

<div ng-controller="ContactsController" >
      <ons-list class="person-list" >
        <ons-list-header class="person-list-header" ng-init="people = contacts">{{char}}</ons-list-header>
          <ons-list-item class="person" modifier="tappable" ng-repeat="person in contacts | filter:searchInput">
            <ons-row>

              <ons-col class="checkbox checkbox--list-item">
                 <input type="checkbox">
                 <div class="checkbox__checkmark checkbox--list-item__checkmark"></div>
              </ons-col>
              <ons-col class="person-name" ng-click="contactsBack(person.username)" >
                {{person.username}}
              </ons-col>
            </ons-row>
          </ons-list-item>
      </ons-list>

Answer 1

As Lex mentioned - you have some code which is not relevant to the current problem - it's usually better if you don't put code which is irrelevant, but I guess it's not a problem in this case.

Basically since you're using the custom tags - all you need is <ons-input type="checkbox"></ons-input>.

Here's a simple demo.

Actually even the ons-row and ons-cols are not really needed unless you're doing something unusual - ons-list-item provides this functionality if you just add left and center classes to its children.

<ons-list-item class="person" modifier="tappable" ng-repeat="person in contacts">
    <ons-input type="checkbox" class="left" input-id="input-{{$index}}"></ons-input>
    <label class="center" for="input-{{$index}}">{{person.username}}</label>
</ons-list-item>