Modify DOM (table cell) via angular directive after modifying scope

Question

I have a multi-dimensional array being injected into my view scope that contains attendance data for students. Essentially, it’s a digital attendance sheet reflecting many records. I’m using angularjs to make XHR calls that can modify individual records asynchronously.

Problem: Once I modify an individual record, for instance: changing an A (absent) to a P (present) via ajax, I’d like to add or remove a css class for that particular table cell. However, directives execute upon binding, and I need it to execute after I’ve modified a record via ajax, long after data has bound.

This was fairly easy to accomplish in the controller using jQuery, right there within the PUT calls success function. But this isn’t the ‘angular way’ to modify the dom. However, from what I’ve read apparently it’s also bad practice to modify DOM after binding. Surely there’s a way to do this ‘right’ with angular… I was hoping you guys could add some clarity. Ideas much appreciated.

Here's the PUT call in the controller, which goes through and modifies the scope appropriately after the PUT completes, then uses the jQuery I mentioned prior to change the cell:

$http.put("/api/attendance/PutAttendRecord/", stuInfo)
.then(function (d) {
    var dt = d.data.class_date_am;
    var dc = d.data.dc_number;
    var st = d.data.status_am;

    $scope.classlist.forEach(function (obj) {
        if (dc == obj.DcNumber) {
            obj.Attend.forEach(function (attObj) {
                if (dt == attObj.ClassDate) {
                    var el = $scope.thisElement.parentNode;

                    if ($(el).hasClass("statusupdated")) {
                        $(el).removeClass("statusupdated");
                    } else { $(el).addClass("statusupdated"); }

                    attObj.Status = st;
                }
            })
        }
    })
})

Here's the directive, which as of now isn't accomplishing anything except a console log.

var updateRecord = function () {

    var directive = {
        link: link
    }
    return directive;
    function link(scope, element, attrs) {
        console.log(element.val());
    }
}

app.controller("ModifyRecordController", ModifyRecordController)
.directive("updateRecord", updateRecord);

Thanks!