JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
  <div ng-controller="MainCtrl as vm">
    <form name="myForm">
      <ul>
        <li ng-repeat="fruit in vm.fruits track by $index"><label><input type="checkbox" ng-click="boxChecked(fruit)" ng-true-value="'{{fruit}}'"  />{{fruit}}</label></li>
      </ul>
    </form>
    <pre>myObject = {{vm.myObject | json}}</pre>
  </div>
</div>

CSS

ul {
  list-style: none;
}

li {
  font-family: 'Arial', sans-serif;
  font-size: 12px;
  margin: 8px 0;
  text-transform: uppercase;
}

JavaScript

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

angular.module('myApp').controller('MainCtrl', function() {
  var vm = this;
  vm.myObject = {
  	myArray: []
  }
  vm.fruits = ["apple", "orange", "pear", "naartjie"];
  
  vm.boxChecked = function(item){
  	debugger;
    var index = vm.myObject.myArray.indexOf(item);
    if(index !== -1)
    	splitComment.splice(index, 1);
    else
    	vm.myObject.myArray.push(item);
  };
});