Angular bootstrap calendar refreshview

Question

I have broadcast new event date from first controller.

Second controller check broadcast and update the calendar.

angular.module('app',[])
.controller('firstCtrl',function(){
 $scope.$watch(function () { return $scope.calData;},function(newVal,oldVal){ 
   if(oldVal!==newVal){
     $timeout(function() {
      $rootScope.$broadcast('updateCalData',$scope.zoneData);
    });
   }
  }); 
})
.controller('secCtrl',function(){
  $rootScope.$on('updateCalData',function(event,args){
  eventCalendar(args);  
 })
  function eventCalendar(){
    //........
  }
})

PROBLEM

Currently views doesn't get populated with new event data. I have to manual refresh the page to see the changes.

I am using Ionic Framework

Thanks, any help appreciated

Answer 1

Use scope.apply

if(!$scope.$$phase) {
          $scope.$apply()
        }