Angular js with .NET core MVC

See more:

MVC

AngularJs

.NET-Core

I am using AngularJs with .net Core MVC Application. In page I am opening Partial View and Bootstrap modal in which Angular is not used and sending value to Main view.

But the value is not reflecting in UI unless next action. so I need to do $scope.$apply forcefully. Which causes issue of apply in progress exception.


So every time i need to make $scope.$apply to reflect changes in UI. Below is my Code of Angular Controller

What I have tried:

var module = angular.module("myApp", [])
        module.controller("myController", function ($scope,$http) {
            $scope.RoleCod = '';
            $scope.RoleId = '';
            $scope.RoleDescription = '';
            $scope.CatDescription = '';
            $scope.CatCode = '';
            $scope.AvailableForms = [];
            $scope.SelectedForms = [];

            $scope.SearchRole = () => {
                var url = "/ApplicationSecurity/RoleCategory/LOVRole";
                var data = "";
                OpenModal(url, data);
            };

            SelectRole = (roleId, roleCode, roleDescription) => {
                $scope.RoleCode = roleCode;
                $scope.RoleId = roleId;
                $scope.RoleDescription = roleDescription;
                $scope.CatDescription = '';
                $scope.CatCode = '';
                $scope.AvailableForms = [];
                $scope.SelectedForms = [];
                $("#tblSelected > tbody").html("");
                $("#ValidationRoleDescription").addClass('hidden');
                $("#ValidationRoleCode").addClass('hidden');
                $('#myModal').modal('hide');
                $scope.$apply();
            }

            $scope.SearchCategory = () => {
                if ($scope.RoleCode == undefined || $scope.RoleCode == '') {
                    $("#ValidationRoleDescription").removeClass('hidden');
                    $("#ValidationRoleCode").removeClass('hidden');
                    return;
                } else {
                    $("#ValidationRoleDescription").addClass('hidden');
                    $("#ValidationRoleCode").addClass('hidden');
                }
                var url = "/ApplicationSecurity/RoleCategory/LOVRoleCategory";
                var data = { roleId: $scope.RoleId };
                OpenModal(url, data);
            };

            SelectCategory = function (categoryCode, categoryDescription) {
                $scope.CatDescription = categoryDescription;
                $scope.CatCode = categoryCode;
                $scope.AvailableForms = [];
                $('#myModal').modal('hide');
                $scope.$apply();
            }

            $scope.GetCatForms = () => {
                $.getJSON('@Url.Action("GetCategoryForms", "Form" , "ApplicationSecurity")',{ catCode: $scope.CatCode, formMode: $("#cmbFormMode").val() } , function (data) {
                    console.log(data);
                    $scope.AvailableForms = data;
                    console.log($scope.AvailableForms);
                    $scope.$apply();
                });
            };

            $scope.AddForm = (form) => {
                var array = $scope.SelectedForms.slice(0);
                array.push({
                    CatDescription: $scope.CatDescription,
                    FormDescription: form.formDescription,
                    CatCode: $scope.CatCode,
                    FormId: form.formId,
                    AddFlag: form.addFlag,
                    UpdateFlag: form.updateFlag,
                    DeleteFlag: form.deleteFlag,
                    Visible: true
                });
                $scope.SelectedForms = array;
                $scope.$apply(); // This causes error
            };
        });