JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <button ng-click='saveCustomer()'>Add Customer</button>
        <div ng-if="customer">
            <div ng-if="!customer.id">
                Saving.... (we fake a 1 second delay for the jsfiddle echo)
            </div>
            <div ng-if="customer.id">
                <div>Id: {{customer.id}}</div>
                <div>Name: {{customer.name}}</div>
                <div>Email: {{customer.email}}</div>
                <div>Phone: {{customer.phone}}</div>
            </div>
        </div>
    </div>
</div>

JavaScript

sangular.module('myApp', [])
.factory('authFactor', function($http){
    return {
        saveCustomer: function(data){
            // This is just to format the information in a way jsfiddle will echo it back.
            var postData = $.param({
                json: JSON.stringify(data),
                delay: 1
            });
            
            
            var customer = {};
            $http.post("/echo/json/", postData).success(function(resp){
                console.log(resp);
                angular.copy(resp, customer);
            });
            return customer;
        }
    };
})
.controller('myCtrl', function($scope, authFactor){
    var id = 1;
    $scope.saveCustomer = function(){
        
        //Here is the actual call... we just put it on a button click.
        $scope.customer = authFactor.saveCustomer({
            id: id++,
            name: 'John',
            email: '[email protected]',
            phone: '321.321.3211'
        });
        
    }
});