JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.13/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.13/angular-mocks.js"></script>
<section ng-app="CancelTest">
    <div ng-controller="CancelCtrl">
        <h4>
            Start Request:
            <button ng-click="request()">
                Request!
            </button>
        </h4>
        <hr>
        <div>
            <button ng-click="cancel( 'Rejected' )">
                Reject
            </button>
            <button ng-click="cancel()">
                Cancel
            </button>
        </div>
        <hr>
        <h4>Resolved:</h4>
        <ol>
            <li ng-repeat="response in responses track by $index">
                {{ response }}
            </li>
        </ol>
        <hr>
        <h4>Rejected:</h4>
        <ol>
            <li ng-repeat="reject in rejects track by $index">
                {{ reject }}
            </li> 
        </ol>
    </div>
</section>

JavaScript

angular.module( 'CancelTest', [ 'ngMockE2E' ] )

.controller( 'CancelCtrl', [ '$scope', 'CancelSrvc',
    function ( $scope, CancelSrvc )
    {
        var defer = {};
        $scope.responses = [];
        $scope.rejects   = [];
        $scope.request   = function ()
        {
            if (defer.$cancel) defer.$cancel();
            defer = CancelSrvc( 'GET', '/api/data/' );
            defer.then( 
                function ( data )
                {
                    $scope.responses.push( data );
                },
                function ( err )
                {
                    $scope.rejects.push( err );
                } );
            
        };
        $scope.cancel = function ( val )
        {
            if ( defer.$cancel ) defer.$cancel( val );  
        }
    }
] )
.factory( 'CancelSrvc', [ '$http', '$q',
    function ( $http, $q )
    {
       return ( function( method, path, data )
       {
           var defer = $q.defer();
           var options = {
               method: method,
               url: path,
               data: data || {},
               timeout: defer.promise
           };
           $http( options )
               .success( function ( data )
               {
                   defer.resolve( data );  
               } )
               .error( function ( err )
               {
                   defer.reject( err ); 
               } );
           defer.promise.$cancel = function ( val )
           {
               defer.reject( val || "Cancelled" );
           };
           return defer.promise;
       } );
    }
] )
.run( [ '$httpBackend',
    function ( $httpBackend )
    {
        $httpBackend.when( "GET", /api\/data/ )
            .respond( function ()
            {
                return [ 200, "API RESPONSE", {} ];   
            } );
    }
] )
// from http://endlessindirection.wordpress.com/2013/05/18/angularjs-delay-response-from-httpbackend/
.config(function($provide) {
    $provide.decorator('$httpBackend',...