Failed to bind data sent from a controller to view angular.js

my app is currently only 3 small parts a service which make http call to .json file a controller that recive data from the service and send it to a view. When i hard code the data in my service it was working well.

When i replaced the hard coded data to .json file it stop working however i logged it in the controller and made sure the data querying correctly from the .json file.

here is the simple controller:

(function (){
    'user strict';
    angular.module('myApp').controller('itemsCtrl',['$state','myappApi', itemsCtrl]);
    //constructor function
    function itemsCtrl($state, myappApi){
        var vm = this;

        myappApi.getItems(function(data){
            vm.items = data;
        });
        //vm.items = data;

        vm.selectItem = function(id){
            myappApi.setItemId(id);
            $state.go("app.item-detail");

        }
    };
})();

The Template code:

<ion-view ng-controller="itemsCtrl as vm">
    <ion-content class="has-header">
        <div class="list">
            <a class="item item-icon-right" ng-repeat="item in vm.items" ng-click="vm.selectItem(item.id)">
                <div class="row">
                    <div class="col item-thumbnail-left">
                        <img ng-src="vas-images/{{item.name}}.jpg">
                    </div>
                    <div class="col col-center">
                        <h3 class="blue-font">{{item.name}}</h3>
                        <p>{{item.desc}}</p>
                    </div>
                    <div class="col col-center">
                        <h4 class="blue-font-alt">Price:{{item.price}}$</h4>
                    </div>
                </div>
                <i class="icon ion-chevron-right icon-accessory"></i>
            </a>
        </div>
    </ion-content>
</ion-view>

The service code:

(function (){
    'user strict';
    angular.module('myApp').factory('myappApi',['$http', myappApi]);

    function myappApi($http){

        //function to get all the items.
        function getItems(callback){
            $http.get("app/items/data.json")
            .success(function(data){
                callback(data);
            });
        }

        //function to set the item ID.
        function setItemId(itemId){
            currentItemId = itemId;
        }

        return{
            getItems: getItems,
            setItemId: setItemId
        };
    };
})();

The .json file:

{
    "items" : [
    {"id":1005, "name":"item-one", "desc":"some text here and there", "price":100},
    {"id":1006, "name":"item-two", "desc":"some text here and there", "price":500},
    {"id":1007, "name":"item-three", "desc":"some text here and there", "price":600},
    {"id":1008, "name":"item-four", "desc":"some text here and there", "price":50},
    {"id":1009, "name":"item-five", "desc":"some text here and there", "price":20},
    {"id":1010, "name":"item-six", "desc":"some text here and there", "price":660}
    ]
}