JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app ng-controller="MyCtrl">
    This works fine: {{myLargeData.data}}<br>
    But this causes JS errors: {{getInfoFromComplexLogic()}}<br>
    And so does this: {{getInfoFromComplexLogicWithParam(myLargeData)}}
</div>

JavaScript

function MyCtrl($scope)
{    
    //mimic long request
    setTimeout(function(){
        console.log("got here");
        $scope.myLargeData = {"data": "foo"};
        //wouldn't need this with $http, but need to here in the timeout
        //this ends up causing all 3 to show up, but that's not what happens with $http and there are JS errors before that.
        $scope.$apply();
    }, 3000);
    
    $scope.getInfoFromComplexLogic = function() {
        if( $scope.myLargeData ){        
            return $scope.myLargeData.data;       
        } else {
            return ""; 
        }
    };
        
    $scope.getInfoFromComplexLogicWithParam = function(largeData) {
        if( largeData ){        
            return largeData.data;       
        } else {
            return ""; 
        }   
    };
}