JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app="app" ng-controller="TestCtrl">
    {{value | testf}}
</div>

JavaScript

var app = angular.module("app",[]);

app.controller("TestCtrl", function($scope) {
    angular.extend($scope, {
        value: 0
    });
});

app.filter("testf", function($timeout) {
    var data = null, serviceInvoked = false;
    
    function realFilter(value) {
        // REAL FILTER LOGIC, DISREGARDING PROMISES
        return data + value;
    }
    
    return function(value) {
        if( data === null ) {
            if( !serviceInvoked ) {
                serviceInvoked = true;
                console.log("SIMULATION OF ASYNC CALL");
                $timeout(function() {
                    var result = "Async: ";
                    data = result;
                }, 2000);
            }
            return "-";
        }
        else return realFilter(value);
    }
});