JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="formExample">
    <div ng-controller="ExampleController"> <span ng-repeat="chapter in chapters" ng-click="checkboxChange($index)" ng-checked="selection.indexOf($scope.chapters[$index]) > -1">                
            <input type="checkbox" name="checkbox" value="{{$index}}" />
            {{chapter.name}}
            <br>
        </span>

        <br>
        <input type="submit" ng-click="submitForm()" id="save" value="Save" />
            
            
    <div> <span ng-repeat="chapter in selection">                    
            <span>
                {{chapter.name}}
               
            </span>
        <br>
    </div>
</div>

JavaScript

angular.module('formExample', []).controller('ExampleController', ['$scope', function ($scope) {

    $scope.chapters = [{
        "name": "Chapter 1: Negative Messages",
        "id": "832115"
    }, {
        "name": "Chapter 2: Physics",
        "id": "832115"
    }];

    $scope.submitForm = function () {
        console.log(selection);
    }
    
    $scope.selection = []
    
    $scope.checkboxChange = function(index){
        
        var chapter = $scope.chapters[index];
        var idx = $scope.selection.indexOf(chapter);

        if (idx > -1){
            $scope.selection.splice(idx, 1);
        } else {
            $scope.selection.push(chapter);
        }
    }

}]);