AngularJS not showing information correctly

Question

I am using AngularJs and I facing a problem with the view. Here is my code and the result.

Any help would be appreciated.

.service("SubjectService", function ($http, $q)
{
    var deferred = $q.defer();
    $http.get('http://genext-it.net/sma/api/subjects').then(function (response)
    {

        deferred.resolve(response);
    });

    this.getSubjects = function ()
    {
        return deferred.promise;
    }
})


.controller('theSubjectsCtrl', function($scope,SubjectService) {
    $scope.subjects = [];
var promise = SubjectService.getSubjects();
    promise.then(function (data)
    {
        $scope.subjects = data;
    });
})


<ion-view title="The Subjects" id="page1">
    <ion-content padding="true" class="has-header">
        <ion-list>

           <ion-item ng-repeat="subject in subjects" >{{subject.data}}</ion-item>
        </ion-list>
    </ion-content>
</ion-view>

enter image description here

Answer 1

You should assign data retrieved from the response

$scope.subjects = data.data;

Markup

<ion-view title="The Subjects" id="page1">
    <ion-content padding="true" class="has-header">
        <ion-list>
           <ion-item ng-repeat="subject in subjects">
               {{subject.Lible}}
           </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

---

Make it more readable code by having some tweak in variable names.

var promise = SubjectService.getSubjects();
promise.then(function (response) {
    $scope.subjects = response.data;
});