JSFiddle - React, Tailwind, and code Playground

by jgoemat

HTML

<div ng-app ng-controller="testController">
    <p>Direct property: {{ property }}</p>
    <p>Function returning property: {{ getProperty() }}</p>
    <p>Direct promise: {{ promise }}</p>
    <p>Function returning promise: {{ getPromise() }}</p>
    
    <p>Direct promise (object): {{ po.promise }}</p>
    <p>Function returning promise (object): {{ getPo().promise }}</p>
    
    <p>Current time: {{ getTime() }}</p>
</div>

JavaScript

function testController($scope, $q, $timeout) {
    var deferred = $q.defer();
    var deferred2 = $q.defer();

    $timeout(function() {
        deferred.resolve('some lazy text');
    }, 2000);
    
    $scope.$watch('getPromise()', function(newValue, oldValue) {
        console.log("$scope.watch('promise')");
        console.dir(arguments);
    });
        
    $scope.promise = deferred.promise;
    
    $scope.getPromise = function() {
        console.dir($scope.promise);
        return $scope.promise;
    };
    
    var deferred2 = $q.defer();
    $scope.po = { promise: deferred2.promise };
    $scope.getPo = function() {
        return $scope.po;
    };

    $timeout(function() {
        deferred2.resolve('some lazy text');
    }, 2000);
    
    $scope.property = 'some text';
    $scope.getProperty = function() {
        return $scope.property;
    };
    
    $scope.getTime = function() {
        return new Date();
    };
}