Check box unchecked after applying corner filter

This results in the same element being added to the array - which is being used for the request - potentially twice. When the modal closes and reopens and no filtering is used, everything is fine (this is because my modals are just in HTML, I just hide them on click). When an element that has already been added, but its checkmark is lost due to filtering, is checked again, two identical elements are added. If it is not set, both will be removed, if it is not the last element in the array, it cannot be removed (I know this is my slapdash logic). Below is the HTML and JavaScript code (known words).

HTML:

<div style="display: inline-block;" ng-controller="modalCtrl">
                <button ng-click="showModal = !showModal">Entities</button>
                <div ng-init="showModal=false">
                    <div class="modal fade in" aria-hidden="false"
                        style="display: block;" ng-show="showModal">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <strong>ENTITIES</strong>
                                <div>
                                    <div>
                                        <input type="text" placeholder="Search" ng-model="simpleFilter">
                                        <button type="button" ng-click="showModal=false">Ok</button>
                                    </div>
                                </div>
                                <br>
                                <div ng-repeat="entity in entityArray | filter:simpleFilter">

                                    <label> <input
                                        style="display: inline-block; margin-top: 5px"
                                        type="checkbox" ng-model="entityChecked"
                                        ng-change="getEntityFromModal(entity, entityChecked)" /> <a>{{entity}}</a>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

      

        
        
        
      

    

Modal controller:

angular.module("app").controller("modalCtrl", ["$scope", "shareDataService", "getDataService", function ($scope, shareDataService,      ngDialog, getDataService) {


$scope.entityArray = shareDataService.getEntityArray();
$scope.depotArray = shareDataService.getDepotArray();

     $scope.getEntityFromModal = function (entity, checked) {
         shareDataService.setModalEntity(entity, checked);
     };

    $scope.getDepotFromModal = function (depot, checked) {
        shareDataService.setModalDepot(depot, checked);
     };

}]);

      

        
        
        
      

    

shareDataService (corresponding methods):

angular.module("app").factory("shareDataService", function () {

var entityArrayService = [];
var depotArrayService = [];
var modalEntity = [];
var modalDepot = [];

getEntityArray: function () {
        return entityArrayService;
    },
getDepotArray: function () {
        return depotArrayService;
    },
setModalEntity: function (entity, checked) {
        if (!checked) {
            for (var i = 0; i < modalEntity.length; i++) {
                if (modalEntity[i] === entity) {
                    modalEntity.splice(i, 1);
                }
            }
        } else {
            modalEntity.push(entity);
        }
    },
setModalDepot: function (depot, checked) {
        if (!checked) {
            for (var i = 0; i < modalDepot.length; i++) {
                if (modalDepot[i] === depot) {
                    modalDepot.splice(i, 1);
                }
            }
        } else {
            modalDepot.push(depot);
        }
    },
});

      

        
        
        
      

    

There are other cases where dataservice methods are called in my main controller, but they are only used for array length. So if the checkbox issue is resolved, everything is resolved.