AngularJS não exibe mensagem

Estou começando a estudar AngularJS, e estou tentando fazer o exemplo abaixo que por sinal é bem simples, ele consegue chamar minha chamada JSON, só que eu queria que ele caísse no status 406, e exibisse a mensagem, está mensagem que não está aparecendo, e não estou entendendo o porque, ele entra no if passa a mensagem e não exibe nada na tela.

<html ng-app ="suiteESCWeb">
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" 
type="text/css"></link>
<link href="http://pingendo.github.io/pingendo-bootstrap/themes/default/bootstrap.css" rel="stylesheet" 
type="text/css"></link>

<script type="text/javascript" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.8/angular-messages.js"></script>

<script>
angular.module("suiteESCWeb", []);
angular.module("suiteESCWeb").controller("usuarioCtrl", function ($scope, $http) {
	$scope.app = "Suite ESC WEB";
	
	$scope.usuario = [];
	$scope.messageError = "";
	
	   var config = {headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin' : '*',
            'Access-Control-Allow-Methods' : 'GET, POST, PUT, DELETE',
            'X-Requested-With': 'XMLHttpRequest',
            'Access-Control-Allow-Headers' : 'Origin, X-Requested-With, Content-Type, Accept'
        }
    };
	
    $scope.carregarUsuarioPorScopo = function () {
	  $http({
            method: "GET", 
            url: 'http://localhost:8080/usuario/1',
            headers: config
        }).
        success(function (data, status, headers, config) {    
			
        	usuario = data;
        	console.log(data);
        	
        	if (data.status == "406") {
        		messageError = "Erro."
    			console.log(messageError);
        	}
        	
        	if (data.status == "500") {
        		
        	}
        	
        }).
        error(function (data, status, headers, config) {                
        	messageError = "Erro."
        	console.log(data);
        });
	};
});
</script>	
</head>
<body ng-controller="usuarioCtrl">

<div>{{app}}</div>

<div>
	<button class="btn btn-default" ng-click="carregarUsuarioPorScopo()">Entrar</button>
</div>

<h3>{{messageError}}</h3>

</body>
</html>

Pelo F12 do navegador na aba console, aparece alguma mensagem de erro?

Nenhuma amigo, passa no console perfeitamente imprimi e não aparece a mensagem no H3.

Cara vc tem que colocar $scope.messageError = "Erro." ao inves de messageError = "Erro." lembre que o ‘prefixo’ $scope que torna sua variável visível em todo o escopo do angular.