Как изменить атрибуты dom в Angular js при использовании ng-change?

Question

<table class="table table-sm table-inverse table-responsive table-striped">
    <thead>
    <tr>
        <th>SL No.</th>
            <th>Repository Name</th>
        <th>Active</th>
    </tr>
    </thead>
    <tr ng-repeat="eachData in lstRepositoryData">
        <td>{{$index + 1}}</td>
        <td>{{eachData.repositoryName}}</td>
        <td>
            <label class="switch">
                <input id="activeRepositorySlider"
                       ng-if="eachData.active == true" type="checkbox"
                       checked ng-model="eachData.active"
                       ng-change='change(eachData.active,"{{eachData.repositoryName}}")'
                       dataid="{{eachData.webHookId}}"
                       dataurl="{{eachData.webHookUrl}}">
                <input id="inactiveRepositorySlider"
                       ng-if="eachData.active == false" type="checkbox"
                       ng-model="eachData.active"
                       ng-change='change(eachData.active, "{{eachData.repositoryName}}")'
                       dataid="{{eachData.webHookId}}"
                       dataurl="{{eachData.webHookUrl}}">
                <span class="slider round"></span>
            </label>
        </td>
    </tr>
</table>

Я пытаюсь изменить пользовательские атрибуты, такие как: dataid и dataurl в приведенном выше домене. Я пытался использовать события и думал об использовании библиотеки jquery для доступа к dom и ближайшей цели, но событие всегда приходит как undefined.

Есть ли способ получить доступ к атрибуту и ​​изменить его после http response.

$scope.change = function (enabled, repositoryName) {
    var popMessage = '';
    if (enabled) {
        popMessage = 'Enabling this will add a WEBHOOK to this repository. Do you want to continue?'
    } else {
        popMessage = 'Disabling this will delete the WEBHOOK from this repository. Do you want to continue?'
    }
    iziToast.question({
        timeout: false,
        pauseOnHover: true,
        close: false,
        overlay: true,
        toastOnce: true,
        backgroundColor: '#009edb',
        id: 'question',
        zindex: 999,
        title: 'Hey',
        message: popMessage,
        position: 'center',
        buttons: [
            ['<button><b>YES</b></button>', function (instance, toast) {
                instance.hide({
                    transitionOut: 'fadeOut'
                }, toast, 'button');
                var data = {
                    active: enabled,
                    repositoryName: repositoryName,
                    owner: localStorage.getItem('githubOwner')
                };
                $http.post("/modifyRepository", data).then(modifyRepositoryCallback, modifyRepositoryErrorCallback);
            },
                true],
            ['<button>NO</button>', function (instance, toast) {
                instance.hide({
                    transitionOut: 'fadeOut'
                }, toast, 'button');
            }],]
    });
};

function modifyRepositoryCallback(response) {
    if (response.status === 200) {
        $http.post("/createWebHook", response.data).then(createWebHookCallback, createWebHookErrorCallback);
    }
}

function modifyRepositoryErrorCallback(error) {
}

function createWebHookCallback(response) {
    // Here Can I access the particular html node and access the custom attribute and modify them.
    console.log(response);
}

function createWebHookErrorCallback(error) {
    console.log(error);
}

UDPATE

Изменено в соответствии с ответом @georgeawg:

$scope.change = function (eachData) {
    var popMessage = '';
    if (eachData.active) {
        popMessage = 'Enabling this will add a WEBHOOK to this repository. Do you want to continue?'
    } else {
        popMessage = 'Disabling this will delete the WEBHOOK from this repository. Do you want to continue?'
    }
    iziToast.question({
        timeout: false,
        pauseOnHover: true,
        close: false,
        overlay: true,
        toastOnce: true,
        backgroundColor: '#009edb',
        id: 'question',
        zindex: 999,
        title: 'Hey',
        message: popMessage,
        position: 'center',
        buttons: [
            ['<button><b>YES</b></button>', function (instance, toast) {
                instance.hide({
                    transitionOut: 'fadeOut'
                }, toast, 'button');
                var data = {
                    active: eachData.active,
                    repositoryName: eachData.repositoryName,
                    owner: localStorage.getItem('githubOwner')
                };
                $http.post("/modifyRepository", data).then(function (response) {
                    if (response.status === 200) {
                        $http.post("/createWebHook", response.data).then(function (response) {
                                eachData.webHookId = response.data.id;
                                eachData.webHookUrl = response.data.url;
                            }, function (error) {
                                console.log(error);
                            }
                        );
                    }
                }, function (error) {
                });
            },
                true],
            ['<button>NO</button>', function (instance, toast) {
                instance.hide({
                    transitionOut: 'fadeOut'
                }, toast, 'button');
                eachData.active = !eachData.active;
            }],]
    });
};

Работает отлично, как ни странно, эта частьпо-прежнему не работает:

eachData.active = !eachData.active;

UDPATE

Добавление этого помогло:

$scope.$apply();

Answer 1

Просто выполните ng-change="change(eachData)", затем измените функцию:

̶$̶s̶c̶o̶p̶e̶.̶c̶h̶a̶n̶g̶e̶ ̶=̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶e̶n̶a̶b̶l̶e̶d̶,̶ ̶r̶e̶p̶o̶s̶i̶t̶o̶r̶y̶N̶a̶m̶e̶)̶ ̶{̶
$scope.change = function (eachData) {
    var enabled = eachData.active;
    var repositoryName = eachData.repositoryName;

    //...

    function createWebHookCallback(response) {
        console.log(response);
        // Here Can I access the particular html node and access the
        // custom attribute and modify them.
        eachData.webHookId = <<function of response>>;
        eachData.webHookUrl = <<...>>;
    }
};

Важно объявить createWebHookCallback функцию внутри $scope.change, чтобы она могла создаватьзакрытие с аргументом eachData. Он не может создать замыкание, если оно вне функции $scope.change.