AngularJS Example:

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular-mocks.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular-sanitize.min.js"></script>
<div ng-app="myApp">
    <div class="container-fluid" ng-controller="AppCtrl">
        <div class="row">
            <div class="col-xs-3">
                <h4>Tests</h4>
                <h5>#1: .success() &amp; .error()</h5>
                <a href="#" ng-click="test1()">Good Url</a><br />
                <a href="#" ng-click="test1(true)">Bad Url</a><hr />
                
                <h5>#2 .success() &amp; .then()</h5>
                <a href="#" ng-click="test2()">Good Url</a><br />
                <a href="#" ng-click="test2(true)">Bad Url</a><hr />
                
                <h5>#3 .then() error recovery</h5>
                <a href="#" ng-click="test3(true)">Bad Url</a><hr />
                            
                <h5>#4 .then() error rejected</h5>
                <a href="#" ng-click="test4(true)">Bad Url</a><hr />
                
                <h5>Test 5 Deep Nesting</h5>
                <a href="#" ng-click="test5()">Good Url</a><br />
                <a href="#" ng-click="test5(true)">Bad Url</a><hr />
            </div>
            <div class="col-xs-9">    
                <h4>Call Order:</h4>
                <div class="well">
                    <ul>
                        <li ng-repeat="o in output" ng-bind-html="o"></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

ol,ul { margin:0; padding:0; }
ol li, ul li{ margin-left:10px; }
ol { list-style-type: decimal; }
ul { list-style-type: none; }
.well ul li:first-child{ margin:0; }
.text-muted{ font-size:12px; }
a{ white-space:nowrap; }
hr{ margin:3px 0; }
h5{ font-weight:bold; }

JavaScript

// NOTE:  ['finally'] and ['catch'] are used here instead of .finally() and .catch() 
//        as old browsers consider those reserved methods (looking at you ie)
// NOTE: .catch() catches errors that dont get handled by .then()'s. 
//        it doesnt really care about .error() and .success() at all.
// NOTE: .catch() only runs if a .then() does't handle the error
// NOTE: .success() and .error() receives the data from the response while
//       .then() receives the actual response

// Takeaway: a good practice is to just use 
//     $http.get(...)
//       .then(successHandler)
//       .then(successHanlder)
//       .catch(generalErrorHandler)

function AppCtrl($scope, $http, $timeout, $q) {
    
    // - .success() and .error() are basically functions that... no matter what,
    //   will run immediately after the reponse returns from the server.
    // - all .errors() fire Immediately on rejected response
    // - all .success() fire Immediately on a resolved response
    $scope.test1 = function(returnError){
        
        $scope.returnAnError = returnError;
        reset('Example 1');
        $http.get(getUrl())
            .success(function(){ logSuc(1, 'Ran at same time'); })
            .error(function(){   logErr(1, 'Ran at same time'); })
            .error(function(){   logErr(2, 'Ran at same time'); })
            .success(function(){ logSuc(2, 'Ran at same time'); })
            .success(function(){ logSuc(3, 'Ran at same time'); })
            .error(function(){   logErr(3, 'Ran at same time'); })
            .success(function(){ logSuc(4, 'Ran at same time'); })
            ['finally'](logFinally)
            ['catch'](logCatch)
    }
    
    
    // - .then() and .catch() dont care about .success() and .error().
    // - .then() will wait for the previous .then() statement to be 
    //   resolved before executing...
    // NOTE: .success() and/or .error() cannot be attached to a .then() statement
    $scope.test2 = function(returnError){
 ...