JSFiddle - React, Tailwind, and code Playground

by bcaudan

HTML

<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="editInvitationCtrl">
    <input type="text" name="totalInvitations"
    ng-model="invitation.totalInvitations" />
</div>

JavaScript

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

app.factory('myService', function($timeout) {
    var myService = {
            async: function(code) {
                var promise = $timeout(sendResponse, 1500).then(function (response) {
                    return response.data;
                });
                return promise;
            }
    };
    return myService;
});

function editInvitationCtrl(myService, $scope, $http) {
    $scope.safeApply = function(fn) {
        var phase = this.$root.$$phase;
        if(phase == '$apply' || phase == '$digest') {
            if(fn && (typeof(fn) === 'function')) {
                fn();
                console.log(phase);
            }
        } else {
            console.log("apply");
            this.$apply(fn);
        }
    };
    
    myService.async($scope.code).then(function(d) {
        $scope.invitation = d;
        $scope.safeApply(function(){
            console.log(JSON.stringify($scope.invitation));
        });
    });
};

function sendResponse() {
    return {
        data: {
            totalInvitations: 3
        }
    }
}