JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="foo">
    <div ng-repeat="result in results">{{result}}</div>
  </div>
</div>

JavaScript

angular.module('app', []).controller('foo', ['$scope','$http', function ($scope, $http) {
    $scope.results = ['Hi'];
    
    var myUrl = 'http://jsonplaceholder.typicode.com/posts/1';
    
    function tryThis(i, url) {
      $scope.results.push('Sending request ' + i + ' to ' + url + '...');
      return $http({
          method: 'GET',
          url: url,
          headers: {
            Accept: 'application/json',
            'Cache-Control': 'no-cache'
          },
          cache: false
      }).success(function() {
        $scope.results.push('Success ' + i + '!');
      }).error(function() {
        $scope.results.push('Error ' + i + '!');
      }).catch(function() {
        $scope.results.push('Caught ' + i + '!');
      }).then(function() {
        $scope.results.push('Resolved ' + i + '!');
      }, function() {
        $scope.results.push('Rejected ' + i + '!');
      });
    }
    
    tryThis(1, myUrl).then(function() {
    	return tryThis(2, myUrl);
    }).then(function() {
      $scope.results.push('All done!');
    }, function() {
      $scope.results.push('Something went wrong...');
    });
}]);