How to update data after it's changed on the server, Angularjs?

Question

Angular

The crux of the matter is that there is a certain user profile in which there is data editing, when saving data, they should be immediately updated on the page, without reloading it.
I read the Internet, I realized that for this you need to use $apply.
Made in the controller "personalInfoCtrl" saving data in the form:

$scope.saveUserData = function(form) {
      var data = {
        organization: $scope.edit.organization,
        first_name: $scope.edit.first_name,
        last_name: $scope.edit.last_name,
        middle_name: $scope.edit.middle_name,
        gender: $scope.edit.gender,
        born_date: sliceData($scope.edit.born_date),
        region_id: $scope.edit.region_id,
        timezone: $scope.edit.timezone,
        reg_postcode: $scope.edit.reg_postcode,
        reg_address: $scope.edit.reg_address,
        fact_postcode: $scope.edit.fact_postcode,
        fact_address: $scope.edit.fact_address
      };
      ApiUser.updateInfo(data).then(function(res){
        if (res.data.result == "success") {
          $scope.edit.successChange = true;
          $scope.edit.errorChange = false;
          ApiUser.getInfo().then(function(res) {
            if( !$scope.$$phase ) {
              $scope.$apply(function(){
                $scope.userData = res.data;
              });
            };
            
          });
        } else {
          $scope.edit.errorChange = true;
          $scope.edit.successChange = false;
        }
      });
    };

After sending the data to the server, I request it and try to update the scope with the user data.
Since the scope userData is in the main "appCtrl" controller for the entire site (parent), and the "personalInfoCtrl" controller is nested for it, perhaps for this reason I can not update it. Either I'm not doing $apply correctly.

angular.module('app.controller')
.controller('appCtrl', ['$scope', 'authService', 'AuthUser', 'userInfo',
  function ($scope, authService, AuthUser, userInfo) {
    'use strict';

    if (authService.getAuthStatus()) {
      $scope.userData = userInfo.data;
      AuthUser.setRole(userInfo.data.role);
    };

  }]);

Huh, what exactly is the problem. Explain what the puncture is and how to bring everything back to normal?

Answer 1

it is not entirely clear why to ask the server for the data that you are sending. $apply is called on $scope if there have been changes in the scope from outside the angular ecosystem, i.e. $timeout(func) is the angular ecosystem and $apply does not need to be called, but setTimeout(func) is already what is called from outside and inside you need to call or $digest or $apply which are almost the same.
Further ..
If you are in the CTRL_1 controller, which is a child of the CTRL_2 controller, then in order to access the parent controller's scope elements inside the CTRL_1 controller, you need to call inside CTRL_1 like this
$scope.$parent.userData = res.data