refreshing part of page anngularjs

Question

i have a webpage and i have two controller.One controller is used to get data from the db and update ui-calendar events and another controller to submit form data to the db.I want to refresh my card(Where the first controller is used) with the new inserted value ie as soon as the value is added to the db the view should be updated with the new table data and shown on the ui-calendar.How to do this with angular and js. These are my controllers

app.controller('myNgController', ['$scope', '$http','$rootScope', 'uiCalendarConfig', function ($scope, $http,$rootScope, uiCalendarConfig) {

$calendar = $('[ui-calendar]');

var date = new Date(),
  d = date.getDate(),
  m = date.getMonth(),
  y = date.getFullYear();

$scope.changeView = function(view){      
   $calendar.fullCalendar('changeView',view);
};

/* config object */
$scope.uiConfig = {
  calendar: {
    lang: 'da',
    height: 450,
    editable: false,
    selectable: true,

    
    header: {
      left: 'month basicWeek basicDay',
      center: 'title',
      right: 'today prev,next'
    },
    eventClick: function(date, jsEvent, view) {
      $scope.alertMessage = (date.title + ' was clicked ');
      alert("clicked"+date.title);
    },
    select: function(start, end, allDay)
 {
  
     var obj = {};
     obj.startAt = start.toDate();
     
     
     obj.startAt=new Date(obj.startAt).toUTCString();
     obj.startAt=obj.startAt.split(' ').slice(0, 4).join(' ');
     
     obj.endAt = end.toDate();
     obj.endAt=new Date(obj.endAt).toUTCString();
     obj.endAt=obj.endAt.split(' ').slice(0, 4).join(' ');
     
     
     
     $rootScope.selectionDate = obj;
     
     
     
     $("#modal1").openModal();
  
  
  calendar.fullCalendar('unselect');
 },
   
    eventRender: $scope.eventRender
  }
};

$scope.events=[];
$scope.eventSources = [$scope.events];
$http.get("rest/leave/list", {
    cache: true,
    params: {}
}).then(function (data) {
    $scope.events.slice(0, $scope.events.length);
    angular.forEach(data.data, function (value) {
     console.log(value.title);
        $scope.events.push({
         
            title: value.title,
            description: value.description,
            start: value.startAt,
            end: value.endAt,
            allDay : value.isFull,
            stick: true
        });
    });
});

 

app.controller("MyAddController", function($scope, $http,$rootScope) {
 $scope.test = {};
 
    $scope.add = function() {
     $scope.test1=$rootScope.selectionDate;
     var jsonData = JSON.stringify($.extend({}, $scope.test, $scope.test1));
     console.log(""+jsonData);
     
     //console.log("------------>"+JSON.stringify($jsonData));
     $http({
         url: "rest/leave/create",
         method: "POST",
         data: jsonData,
         headers: {'Content-Type': 'application/json'}
        
        }).success(function(data, status, headers, config) {
            if (data) {
                $scope.data = data;
                alert("success");
            }
        }).error(function(data, status, headers, config) {
            alert("error");
        })
    }
});

Answer 1

In this particular case I would suggest using $broadcast. Once your DB is updated (in the .success callback function), broadcast an event on $rootScope. You can then listen to this event in your other controller and do whatever you need to do after the event is received.

Add to MyAddController:

$rootScope.$broadcast('MyAddController.success');

Add to your MyDbController:

const removeRootScopeListener = $rootScope.$on('MyAddController.success', () => {
    // Do whatever you need to do here
});

Do not forget, that event listeners on $rootScope are not cleaned up automatically, when your local $scope is destroyed. To prevent a memory leak, remove the event listener manually.

To remove the event listener:

$scope.$on('$destroy', () => {
    removeRootScopeListener();
});