AngularJS does not refresh when a checkbox is updated with jQuery

Is there a way to tell Angular to refresh when a angular-tracked checkbox is updated outside angular ?

Yes, there is something called "dirty checking" which can help you in order to achieve this (See scope docs).

In order to tell AngularJS to do dirty checking you can do $scope.$apply();. Something like:

$(document).ready(function() {
    $('#my-checkbox-tracked-by-angular').attr('checked',true_or_false).change();

    // do dirty checking!
    // wrap it inside $timeout in order to avoid Action Already In Progress
    // you can laverage this in your app. Maybe it's not necessary,
    // but that depends on your entire app architecture and interaction
    // between all angularjs elements (controllers, directives, etc)
    $timeout(function() {
        $scope.$apply();
    });
});

If, for any reason, you could not do this, maybe, you could use as a workaround to trigger the click event twice. It is not the best solution and surely not the cleanest one, but it will do the job. Something like:

$(document).ready(function() {
    $('#my-checkbox-tracked-by-angular).trigger("click").trigger("click");
});

Caution:

If you mix AngularJS and jQuery for DOM manipulation directly, do it cautiously, it can become a mess. In order to get some more background about why, read "Thinking in AngularJS" if I have a jQuery background?.

Additional readings:

• $rootScope.Scope#$apply
• Action Already In Progress
• $timeout