StackOverFlow | How to access Response body from Angular HTTP Interceptor on failure?

<!DOCTYPE html>
<html ng-app="demo">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
  <script src="app.js"></script>
  <script src="demo.alert.service.js"></script>
  <script src="demo.http.error.interceptor.js"></script>
  <script src="demo.controller.js"></script>

  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
  <link rel="stylesheet" href="style.css" />
  <title></title>
</head>

<body class="container-fluid">
  <div class="container col-md-9" ng-controller="demo.controller">
    <h3>Http Requests ....</h3>
    <div>
      <table class="table table-striped">
        <thead>
          <tr>
            <th>#</th>
            <th>Response</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td colspan="2">
              <button ng-click="sendNewRequest(requests)">Send new request ...</button>
            </td>
          </tr>
          <tr ng-repeat="item in requests | orderBy:$index:false">
            <th scope="row">{{ requests.length - $index}}</th>
            <td>
              <pre>{{ item.responseData | json }}</pre>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>


  <div>
    <div class="col-md-3 alert-{{alert.type}}" 
         uib-alert dismiss-on-timeout="4000" 
         close="alerts.splice($index)" 
         ng-repeat="alert in alerts">{{alert.message}}</div>
  </div>
</body>

</html>


angular.module('demo', [
    'ngAnimate', 
    'ui.bootstrap']);

pre {
  height:auto;
  max-height: 150px;
}

StackOverFlow | How to access Response body from Angular HTTP Interceptor on failure?
http://stackoverflow.com/questions/39170906/how-to-access-response-body-from-angular-http-interceptor-on-failure

(function () {
	'use strict';
	angular
        .module('demo')
        .service('demo.alert.service', service);

	service.$inject = ['$q', '$rootScope'];

	function service($q, $rootScope) {

		var _alerts = ($rootScope.alerts = ($rootScope.alerts || []));

		function _showAlert(message, type) {
			_alerts.push({
				message: message,
				type: type || 'warning'
			});
		}

		this.show = _showAlert;
	}

})();

(function () {
	'use strict';
	angular
		.module('demo')
		.controller('demo.controller', controller);

	controller.$inject = ['$scope', '$http'];

	function controller(vm, $http) {

		function sendHttpRequest(target) {
			target.isLoading = true;
			$http.get('https://api.themoviedb.org/3/tv/top_rated').then(function (response) {
				target.responseData = response;
				target.isLoading = false;
			}, function (error) {
				target.responseData = error;
				target.isLoading = false;
			});
		}

		function sendNewRequest(requests) {
			var request = {
				isLoading: false
			}

			requests.unshift(request);
			sendHttpRequest(request)
		}

		function onLoad() {
			vm.requests = [];
			vm.sendNewRequest = sendNewRequest;
		}

		onLoad();
	}
})();

(function () {
    'use strict';

    angular
        .module('demo')
        .factory('httpErrorInterceptor', ['$q', 'demo.alert.service', function ($q, $alert) {
            var interceptor = {
                responseError: function (response) {
					/* 
						NOTE: if "status_message" is not in the parsing string JSON.parse(response.data.html).status_message 
						will thrown an undefined error and break the execution
					*/
					var msg = !response.data ? 'Error occured ...'
						: !response.data.html ? response.data.status_message : JSON.parse(response.data.html).status_message;
					$alert.show(msg, 'danger');

					return $q.reject(response);
                }
            };
            return interceptor;
        }]);

    angular
        .module('demo')
        .config(['$httpProvider', function ($httpProvider) {
            $httpProvider.interceptors.push('httpErrorInterceptor');
        }]);

})();