Checkboxes and Radios in Angular2+

Working on a form component in Angular, and having some trouble with. I've been having trouble with the visuals mainly, and getting really odd behavior out of them.

I've decided to move over to a checkbox styled to be a toggle.

Template code:

  <div class="switch">
            <input
              type="checkbox"
              name='correctPerson'
              [(ngModel)]='person.name.correctPerson' 
              [value]='person.name.correctPerson.value'>
            <span
              class="slider round"
              (click)='setCorrectPersonName()'></span>
          </div>

CSS:

.switch {
  position: relative;
  display: inline-block;
  margin: 40px;
  width: 60px;
  height: 34px;
}
.switch input {
  display: none;
}
.switch .slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.switch .slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.switch input:checked + .slider {
  background-color: #cda;
}
.switch input:focus + .slider {
  box-shadow: 0 0 1px #dca;
}
.switch input:checked + .slider:before {
  -webkit-transform: translateX(26px);
          transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

for the most part, the code works, and the setCorrectPersonName() function works, but the checkbox is only registering the first click.