Angular setting up ng-click on row but checkbox not working as desired

I have defined a simple row that has a name and a checkbox. I have the name and the checkbox bound to angular data, but I am now attempting to put in a row click that will reverse the value of the checkbox bound data, and still allow user to click the check box

this is my html

<div class="container" ng-controller="officeController" ng-cloak>
    <div class="row" ng-repeat="employee in office" ng-click="toggleStatus(employee)">
        <div class="col-md-1">
            <img ng-src="{{employee.imageUrl}}" style="width: 50px; height: 50px;"/>
        </div>
        <div class="col-md-7" ng-click="alert('hello')">
            {{employee.name}}
        </div>
        <div class="col-md-4">
        <input type="checkbox" ng-model="employee.inOffice" ng-click="toggleCheckbox($event)"/>
        </div>
    </div>
</div>

and this is my controller

officeModule.controller("officeController", function ($scope, officeRepository) {
    $scope.office = officeRepository.get(),
    $scope.toggleStatus = function (employee) {
        console.log('onClick' + new Date());
        console.log('Original: ' +employee.id + ', "' + employee.name + '", ' + employee.inOffice);
        employee.inOffice = !employee.inOffice;
        console.log('Modified: ' + employee.id + ', "' + employee.name + '", ' + employee.inOffice);
    };
    $.toggleCheckbox = function($event) {
        $event.stopPropagation();
    }
});

The employee object is data returned from a simple api call ( the officeRepository on the controller )

I have tried only having ng-checked on the checkbox, but I cant seem to get everything to work the way I want it

What am I doing wrong?