Angular object returning reference variable instead of value unless called directly within the controller

Question

Problem:

An object in the angular controller returns a reference variable instead of the value for the object property. When I call that property directly inside one of the controller's it returns correctly but when I do the same on the front end it returns the reference variable instead of the property value.

Edit function of the Lot Controller

this.edit = function(lotId){
    lotService.getById(lotId).then(function(response){
        console.log(response.data[0]);
        console.log(response.data[0].Lot.id);
        lotService.broadcastSubLotChange(response.data[0]);
            ...
    });
}

Edit function console logs

Notice the property value returned in the object is different than the value when called directly

---

Additional Information:

Lot Service broadcast function

 this.broadcastSubLotChange = function(subLot){
        this.sublot=subLot;
    }

Form Controller Broadcast Listener

$scope.$on('sublotChange', function() {
        $scope.lot=lotService.sublot;
        if($scope.lot.Lot==null){
            $scope.lot={'Lot':{'parentLot':{'Lot':{'id':lotService.lot.Lot.id}}}};
        }   

        console.log(lotService.sublot);
        console.log("sublot: "+$scope.lot.Lot.id);
        console.log("lot: "+$scope.lot.Lot.parentLot.Lot.id); 
  });

Form Controller Listener Logs

HTML call of angular variables

• {{lot.Lot}} returns correctly other than "id":"{{lot.Lot.id}}"
• {{lot.Lot.parentLot.Lot.id}} returns correctly 755
• {{lot.Lot.id}} returns {{lot.Lot.id}}