AngularJS re-initialize an object

Question

I have an if condition in my Javascript as follows:

if($scope.cal){
     delete $scope.cal;
     $scope.cal = new CalHeatMap();
     var datedata = $scope.attendance.dates;

}else{
     $scope.cal = new CalHeatMap();
     var datedata = $scope.attendance.dates;
}

After referring a few posts, i realized we cannot completely delete an object. In my scenario, i need to initialize a new heatmap and replace the existing one. How do i get around in this situation?

Also tried:

if($scope.cal){
     $scope.cal = {};
     $scope.cal = new CalHeatMap();...

Answer 1

You should not need to delete or blank an existing object on the $scope. Just regular assignment should work whether a property is already defined or not.

$scope.cal = new CalHeatMap();

From what I understand of $scope, child scopes will not see the change however. To work around that you would need to update an object on the $scope instead of replacing it. Something like:

$scope.vm.cal = new CalHeatMap();