JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="panel" ng-controller="checkBoxController">
    	<h3 style="text-align:center;">AngularJS - Retrieve Multiple Checkbox Selected Options</h3>

    <p style="text-align:center;font-family:Tahoma">Demo by Priya Darshini - Tutorial @ <a href="javascript:parent.window.location.href='http://www.programming-free.com/2014/05/angularjs-retrieve-multiple-checkbox-selected-options.html'" style="color:turquoise">Programmingfree</a>

    </p>
    <div class="check-box-panel">
        <div class="row" ng-repeat="employeess in chunkedCategories">
 <div class="col-xs-4" ng-repeat="employee in employeess">
            <div class="action-checkbox">
                
                <input id="{{employee.name}}" type="checkbox" value="{{employee.name}}" ng-checked="selection.indexOf(employee.name) > -1" ng-click="toggleSelection(employee.name)" />
                <label for="{{employee.name}}"></label>{{employee.name}}</div>
        </div>
        </div>
    </div>

CSS

.panel {
    width: 60%;
    margin-right: 20%;
    margin-left: 20%;
    background-color: #39393d!important;
    border-color: #e2e2e2;
    border: 1px solid transparent;
    height: 380px;
    color:white;
}
.action-checkbox {
    padding-left: 25%;
    margin-top: 50px;
    margin-bottom: 30px;
    line-height: 10px;
    display: inline;
}
.check-box-panel {
    width: 150px;
    float: left;
    display: inline;
    margin-top: 30px;
    margin-left: 30px;
    border-style: dotted;
    padding-top: 10px;
    padding-bottom: 10px;
}
.selected-items-panel {
    margin-left: 210px;
    margin-top: 17%;
    margin-right:10px;
}
.selected-item {
    display:inline;
    margin-right:10px;
    font-size:16px;
    color:turquoise;
    font-family:Trebuchet MS;
}
input[type=checkbox] {
    display:none;
}
/* to hide the checkbox itself */
 input[type=checkbox] + label:before {
    font-family: FontAwesome;
    display: inline-block;
}
input[type=checkbox] + label:before {
    content:"\f096";
}
/* unchecked icon */
 input[type=checkbox] + label:before {
    letter-spacing: 10px;
}
/* space between checkbox and label */
 input[type=checkbox]:checked + label:before {
    content:"\f046";
    color:turquoise;
}
/* checked icon */
 input[type=checkbox]:checked + label:before {
    letter-spacing: 5px;
}
/* allow space for check mark */

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('checkBoxController', function ($scope) {
    $scope.employees = [{
        name: 'John',
        age: 25,
        gender: 'boy'
    }, {
        name: 'Jessie',
        age: 30,
        gender: 'girl'
    }, {
        name: 'Johanna',
        age: 28,
        gender: 'girl'
    }, {
        name: 'Joy',
        age: 15,
        gender: 'girl'
    }, {
        name: 'Mary',
        age: 28,
        gender: 'girl'
    }, {
        name: 'Peter',
        age: 95,
        gender: 'boy'
    }, {
        name: 'Sebastian',
        age: 50,
        gender: 'boy'
    }, {
        name: 'Erika',
        age: 27,
        gender: 'girl'
    }, {
        name: 'Patrick',
        age: 40,
        gender: 'boy'
    }, {
        name: 'Samantha',
        age: 60,
        gender: 'girl'
    }];
    
    while ($scope.employees.length > 0){
 $scope.chunkedCategories.push($scope.employees.splice(0, 3));
     alert('dsqd');
    }    
    $scope.chunkedCategories=[];
   
    $scope.selection = [];
    // toggle selection for a given employee by name
    $scope.toggleSelection = function toggleSelection(employeeName) {
        var idx = $scope.selection.indexOf(employeeName);

        // is currently selected
        if (idx > -1) {
            $scope.selection.splice(idx, 1);
        }

        // is newly selected
        else {
            $scope.selection.push(employeeName);
        }
    };
});