JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="TestCtrl">
    {{value | testf}}
    <button ng-click="dummy()">Create digest cycles affecting the value</button>
</div>

JavaScript

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

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

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 ) {
                console.log("SIMULATION OF ASYNC CALL");
                serviceInvoked = true;
                $timeout(function() {
                    var result = "Async: ";
                    data = result;
                }, 4000);
            }
            return "-";
        }
        else return realFilter(value);
    }
});