Display Problem

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>