Display Problem callback

ionic-v1
1

Hello,

I want to display a list item from a “test.json” file.

File content :[{"id":"1","name":"ABC"}, {"id":"2","name":"DEF"}]

alert() in service displays: [{"id":"1","name":"ABC"}, {"id":"2","name":"DEF"}]

but my template “<list-Item></list-Item>” shows nothing !

Can you help me ?

Here is the code :

template :

<ion-view view-title="List test">
       <ion-content class="padding">
             <h3>List test</h3>            
             <list-Item></list-Item>
       </ion-content>
</ion-view>

Controller :

app.controller('List', function ($scope,itemProvider) {
        $scope.items = itemProvider.getItems();  
});

Service :

var items = [];
app.service('itemProvider', function($ionicPlatform,$cordovaFile) {
    this.getItems = function () {     
        $ionicPlatform.ready(function () {
            // READ 
           $cordovaFile.readAsText(cordova.file.dataDirectory, "test.json")
                 .then(function (success) {
                        // success
                        items = success;
                        alert("SUCCESS : >> " + items);
                 }, function (error) {
                        // error
                        alert("ERROR:" + error);
                 });     
        });    
        return items;
    }
})

directive :

app.directive('listItem', function() {
    return {
        templateUrl: 'views/directives/listItem.html',
        restrict : 'E'
    }
})

Template directive :

<label class="item item-input item-stacked-label">
    <ion-list list-Item>
        <ion-radio ng-if="item.name" ng-repeat="item in items" ng-model="choice" ng-value="item.name"><b>{{item.name}} </b>- id: {{item.id}}</ion-radio> 
    </ion-list>
</label>
2

add scope: true to the directive so that it shares the same scope. :

app.directive('listItem', function() {
    return {
        templateUrl: 'views/directives/listItem.html',
        restrict : 'E',
        scope: true
    }
})
3

I added but it does not work.

4

I added two alert () “SUCCESS A” and "SUCCESS B "
it displays first “SUCCESS B” empty.
and “SUCCESS A” with [{"id":"1","name":"ABC"}, {"id":"2","name":"DEF"}]

var items = [];
app.service('itemProvider', function($ionicPlatform,$cordovaFile) {
    this.getItems = function () {     
        $ionicPlatform.ready(function () {
            // READ 
           $cordovaFile.readAsText(cordova.file.dataDirectory, "test.json")
                 .then(function (success) {
                        // success
                        items = success;
                        alert("SUCCESS A : &gt;&gt; " + items);
                 }, function (error) {
                        // error
                        alert("ERROR:" + error);
                 });     
        });
        alert("SUCCESS B : &gt;&gt; " + items);
        return items;
    }
})