I'm having problems accessing a $resource variable in AngularJS - angularjs

Question

I made a request for a php getting a JSON string, when I access the string in my template using $ctrl.respostas[0].status it returns a string with a value, but when I try to use the same model in my controller (this.respostas[0].status), it came nothing, I need to check the answer in my controller, but I don't know how, any one can help me?
Template:
<p>respostas: {{$ctrl.response}}</p>
<p>confere: {{$ctrl.test}}</p>
<p>status: {{$ctrl.response[0].status}}</p>
Controller
angular.
module('tela').
component('tela', {
templateUrl: 'tela/tela.template.html',
controller: ['Request',
function telaController(Request, ̶$̶r̶o̶o̶t̶S̶c̶o̶p̶e̶) {
this.test = "ola";
this.id = "1";
this.validate = function validate() {
this.response= Request.save({id: this.id},[]);
this.test = "algo";
this.test = this.response[0].status;
}
}
]
});
Request
angular.
module('request.Request').
factory('Request', ['$resource',
function($resource) {
return $resource('./php/acessing.php',{
teste: "#id",
}, {
save: {
method: 'POST',
hasBody: true,
isArray: true,
cache: false
}
});
}
]);

Answer 1

It is important to realize that invoking a $resource object method immediately returns an empty reference (object or array depending on isArray). Once the data is returned from the server the existing reference is populated with the actual data.
The HTML template shows the data because the interpolation bindings {{ }} check the object every digest cycle and update the DOM. The controller on the other hand needs to use the attached promise to examine the data:
app.component('tela', {
templateUrl: 'tela/tela.template.html',
controller: ['Request',
function telaController(Request, ̶$̶r̶o̶o̶t̶S̶c̶o̶p̶e̶) {
this.test = "ola";
this.id = "1";
this.validate = function validate() {
this.response= Request.save({id: this.id},[]);
var promise = this.response.$promise;
promise.then(data => {
console.log(data[0].status);
console.log(this.response[0].status);
});
}
}
]
});
From the Docs:
The Resource instances and collections have these additional properties:
$promise: The promise of the original server interaction that created this instance or collection.
On success, the promise is resolved with the same resource instance or collection object, updated with data from server.
On failure, the promise is rejected with the http response object.
— AngularJS $resource API Reference - Usage