.checked is undefined when using a custom checkbox

I found this in the internet:

and this is the code:

style.css

input[type="checkbox"] {margin-right: 5px;}
.header {margin-bottom: 30px;}
.chooseLib{border-bottom: 1px solid #000; padding-bottom: 10px; margin-bottom: 20px;}
.libs {list-style-type: none; margin: 0px; padding: 0px;}
.libs li {background: #d7e3f0; padding: 10px;  margin-bottom: 3px; cursor: pointer;}
.libs li.marked {background: #b4dfa6;}
.libs li span.glyphicon{margin-right: 10px; float: right;}
.alert{margin-top: 20px;}

checkbox.html

            <ul class="libs">
                <li ng-repeat="participant in participantsList" ng-class="{marked: participant.checked}" ng-click="participantChanged(participant.checked)"  ng-switch on ="participant.checked"><span> </span> <span class="glyphicon glyphicon-ok" ng-switch-when="true"></span></li>
            </ul>

the problem is that "participant.checked" is undefined which means that all my checkbox stay in gray (the picture is what I want to realize)