Use AngularJS with ASP.NET MVC 4 to detect changes

Question

I have an existing MVC 4 application with several groups of checkboxes and I need to detect when a user has made a change, i.e. checked or unchecked a checkbox. If the user has made a change and they try to navigate away from the page I need to prompt them to save their changes. I am just learning AngularJS, but figured I could use it to detect when a checkbox state has change and also use routes in angular to detect when a user is navigating away from the page.

I have based my code on the answer here. Since the view is already being rendered by MVC I cannot use REST services and angular to populate the model and view.

HTML rendered in the view

<div id="userPermissions" class="userWrapper" ng-app="myApp.User">      
<div id="actionCategories" class="section" ng-controller="UserCtrl">
    <div class="actionGroupBody">
        <div class="actionGroupAction">
             <input type="checkbox" value="Create new users" 
            id="action-f9ae022b-5a53-4824-8a79-f7bbac844b11" 
            data-action-category="8aefed6e-b76c-453f-94eb-d81d2eb284f9"  
            ng-checked="isSelected('f9ae022b-5a53-4824-8a79-f7bbac844b11')"
            ng-click="updateSelection($event,'f9ae022b-5a53-4824-8a79-f7bbac844b11')"/>Create new users 
         </div>
         <div class="actionGroupAction">
            <input type="checkbox" value="Edit users" 
            id="action-5525d5e7-e1dd-4ec3-9b1d-3be406d0338b" 
            data-action-category="8aefed6e-b76c-453f-94eb-d81d2eb284f9"  
            ng-checked="isSelected('5525d5e7-e1dd-4ec3-9b1d-3be406d0338b')"
            ng-click="updateSelection($event,'5525d5e7-e1dd-4ec3-9b1d-3be406d0338b')"/>Edit users
        </div>
         <div class="actionGroupAction">
            <input type="checkbox" value="Edit personal account" 
            id="action-9967c1c2-c781-432b-96df-224da760bfb6" 
            data-action-category="8aefed6e-b76c-453f-94eb-d81d2eb284f9"  
            ng-checked="isSelected('9967c1c2-c781-432b-96df-224da760bfb6')"
            ng-click="updateSelection($event,'9967c1c2-c781-432b-96df-224da760bfb6')"/>Edit personal account
        </div>
    </div>
<div class="caption">
            <label class="actionGroupCaption">Store</label> <span class="actionCategorySelectAll"><input type="checkbox" value="select all Store" id="7bace6c1-4820-46c2-b463-3dad026991f2" data-action-category="selectall"/>All</span>
        </div>
        <div class="actionGroupBody">
            <div class="actionGroupAction">
                <input type="checkbox" value="Access home page" 
                id="action-fba7e381-4ed8-47ce-8e85-b5133c9ba9f7" 
                data-action-category="7bace6c1-4820-46c2-b463-3dad026991f2"  
                ng-checked="isSelected('fba7e381-4ed8-47ce-8e85-b5133c9ba9f7')"
                ng-click="updateSelection($event,'fba7e381-4ed8-47ce-8e85-b5133c9ba9f7')"/>Access home page
            </div>
            <div class="actionGroupAction">
                <input type="checkbox" value="Edit settings" 
                id="action-2d02b77b-14a4-4136-a09f-fd51eecd2dbe" 
                data-action-category="7bace6c1-4820-46c2-b463-3dad026991f2"  
                ng-checked="isSelected('2d02b77b-14a4-4136-a09f-fd51eecd2dbe')"
                ng-click="updateSelection($event,'2d02b77b-14a4-4136-a09f-fd51eecd2dbe')"/>Edit settings
            </div>
            <div class="actionGroupAction">
                <input type="checkbox" value="Edit products" 
                id="action-f42f933c-a2b8-42e8-af4b-d52f90f58ddb" 
                data-action-category="7bace6c1-4820-46c2-b463-3dad026991f2"  
                ng-checked="isSelected('f42f933c-a2b8-42e8-af4b-d52f90f58ddb')"
                ng-click="updateSelection($event,'f42f933c-a2b8-42e8-af4b-d52f90f58ddb')"/>Edit products
            </div>
            <div class="actionGroupAction">
                <input type="checkbox" value="Edit orders" 
                id="action-92ed258b-c954-46e4-b5c9-a89fdb5c54d9" 
                data-action-category="7bace6c1-4820-46c2-b463-3dad026991f2"  
                ng-checked="isSelected('92ed258b-c954-46e4-b5c9-a89fdb5c54d9')"
                ng-click="updateSelection($event,'92ed258b-c954-46e4-b5c9-a89fdb5c54d9')"/>Edit orders
            </div>
        </div>
</div>
</div>

here's the angular code

 var app = angular.module('myApp.User', []);

app.controller('UserCtrl', function ($scope) {
    $scope.entities = [{ //how to populate with checkboxes state from view? factory maybe similar to below??? // }];

    $scope.selected = [];
    var updateSelected = function (action, id) {
        if (action == 'add' & $scope.selected.indexOf(id) == -1)
            $scope.selected.push(id);
        if (action == 'remove' && $scope.selected.indexOf(id) != -1)
            $scope.selected.splice($scope.selected.indexOf(id), 1);
    };

    $scope.updateSelection = function ($event, id) {
        var checkbox = $event.target;
        var action = (checkbox.checked ? 'add' : 'remove');
        updateSelected(action, id);
    };

    $scope.selectAll = function ($event) {
        var checkbox = $event.target;
        var action = (checkbox.checked ? 'add' : 'remove');
        for (var i = 0; i < $scope.entities.length; i++) {
            var entity = $scope.entities[i];
            updateSelected(action, entity.id);
        }
    };

    $scope.getSelectedClass = function (entity) {
        return $scope.isSelected(entity.id) ? 'selected' : '';
    };

    $scope.isSelected = function (id) {
        return $scope.selected.indexOf(id) >= 0;
    };

    $scope.isSelectedAll = function () {
        return $scope.selected.length === $scope.entities.length;
    };
});

    app.factory('UserDataService', function () {

    var service = {}

    service.getData = function () {
        var actions = $("input[id^=action-]");

        return actions;
    }

    return service;    
});

Whenever I click a checkbox none of the $scope functions (.updateSelection, .isSelected, etc.) fire in the controller.