JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myapp">
    <div class="app " ng-controller="MyCtrl">{{stringToDisplay}}
        <button class="button" ng-click="clickMe()">Update display</button>
    </div>
</div>

JavaScript

var myapp = angular.module('myapp', []);

myapp.value('Service', {
    checkSomething: function (data, callback) {
        console.log('Checking someting!');
        setTimeout(function () {
            callback({
                someData: 'Checking done!'
            });
        }, 2000);
    },
    someCheck: function () {
        return true;
    }
});

myapp.factory('Factory1', ['$http', '$q', '$location', '$rootScope', 'Service', function ($http, $q, $location, $rootScope, Service) {

    return {

        checkSomething: function (data) {

            var deferred = $q.defer(); //init promise

            Service.checkSomething(data, function (response) {
                // This is a response from a get request from a service
                deferred.resolve(response);
                console.log('Resolved with \'' + JSON.stringify(response) + '\'');
            });

            return deferred.promise;
        }
    };
}])

myapp.controller('MyCtrl', ['$rootScope', '$scope', '$location', 'Service', 'Factory1', function ($rootScope, $scope, $location, Service, Factory1) {
    if (Service.someCheck() !== undefined) {
        // Setting the variable when view is loaded for the first time, but this shouldn't effect anything
        $scope.stringToDisplay = "Initially loaded";

    }

    $scope.clickMe = function () {
        Factory1.checkSomething($scope.inputData).then(function (response) {
            $scope.stringToDisplay = response.someData; // The data here is actually being loaded!
            console.log('"' + $scope.stringToDisplay + '" set!');
        });
    };

}]);