I am trying to make ng-repeat utilize my css class formCheckBox in AngularJS. So when the form loads it creates multiple check boxes using my css styling. Right now the check boxes disappear and there is no styling. I tried just using class="formCheckBox" but it also does not work.

Here is the code:

HTML:

    <div require-global-documentvariable="HTML_General_NORM">
    <label ng-repeat="fruitName in fruits">
    <input
    ng-class="{'formCheckBox' : fruitName}"
    type="checkbox"
    name="selectedFruits[]"
    value="{{fruitName}}"
    ng-checked="selection.indexOf(fruitName) > -1"
    ng-click="toggleSelection(fruitName)"
    > {{fruitName}}
    </label>
    </div>

CSS:

     .formCheckBox:checked + label::after {
     content: '';
     position: absolute;
     width: 1.2ex;
     height: 0.4ex;
     background: rgba(0, 0, 0, 0);
     top: 0.9ex;
     left: 0.4ex;
     border: 3px solid #2c677d;
     border-top: none;
     border-right: none;
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     transform: rotate(-45deg);
     }

     .formCheckBox {
     line-height: 2.1ex;
     }

     .formCheckBox {
     position: absolute;
     left: -999em;
     }

     .formCheckBox + label {
     position: relative;
     overflow: hidden;
     cursor: pointer;
     }

    .formCheckBox + label::before {
     content: "";
     display: inline-block;
     vertical-align: -25%;
     height: 2ex;
     width: 2ex;
     background-color: white;
     border: 2px solid #2c677d;
     border-radius: 4px;
     box-shadow: inset 0 2px 5px rgba(0,0,0,0.25);
     margin-right: 0.5em;
     }

JS:

        // Fruits
        $scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];

        // Selected fruits
        $scope.selection = ['apple', 'pear'];

        // Toggle selection for a given fruit by name
        $scope.toggleSelection = function toggleSelection(fruitName) {
            var idx = $scope.selection.indexOf(fruitName);

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

            // Is newly selected
            else {
                $scope.selection.push(fruitName);
            }

            $scope.DocumentData.HTML_General_NORM = $scope.selection.join(',');
         };