Restangular data, getting into $scope for a list

Question

Been wrestling with API stuff all day, and decided to use Restanglar. Really having issues getting the data out, and into $scope.

I understand that it won't just be the JSON that is returned from the API, and has a bunch of other internal methods etc. But when I get the data out, I can see it buried somewhere in the debugging with console.log, but I can't seem to get it into $scope to use it in my view which was working fine previously.

How can I get that data out into my $scope, and therefore my view?

Model

angular.module('horse', ['restangular'])
    .config(function(RestangularProvider) {
        RestangularProvider.setBaseUrl('http://url/api');

        RestangularProvider.setResponseInterceptor(
          function(data, operation, what) {
            if (operation == 'getList') {
              return data[what];
            }
            return data;
        });
});

Controller

angular
  .module('horse')
  .controller("IndexController", function ($scope, Restangular) {
    $scope.horse = null;
    $scope.showSpinner = true;

    Restangular.all('horse').getList().then(function(horse) {
        $scope.horse = horse;
        console.log($scope.horse);
    });
});

API response

{"error":false,"horse":[{"id":"1","name":"horse 2"},{"id":"2","name":"horse 2"}]}

Edit 1

Restangular response

[Object, Object, route: "horse", getRestangularUrl: function, getRequestedUrl: function, addRestangularMethod: function, clone: function…]

Edit 2

I have also tried this - https://github.com/mgonto/restangular#using-values-directly-in-templates

$scope.horse = Restangular.all('horse').getList().$object;

Which just results in an empty array being output. I have also tried removing the setResponseInterceptor and modifying the structure of the api to result the data array directly without the meta stuff (error, etc), no joy :(

Answer 1

Assuming that what you have shown as "API response" is what's getting outputted from the console.log in your controller, it seems that all you need to do is set your scope model the the property "horse" in the response data like this:

$scope.horse = horse.horse;
 

Since that reads pretty oddly, you should change the param name of the .then callback to data, which would be a much more agnostic and standard param name. If you make that change you can set your horse data to your scope model from inside your callback like this:

$scope.horse = data.horse;

If I misunderstood your question let me know. Hope this is helpful.

Answer 2

The data seems to be coming through. I notice you're using Steroids, have you checked the markup and not just the console?

Make sure you set the scope spinner to false, to ensure that the spinner is hidden when the data comes through.

$scope.ShowSpinner = false;