how to get data of php Web api json from server to using angularJs.?

Question

When i am save this json in my local computer and use it in my angularjs script. It's work fine. But when i am using direct server to this it is not working why.?

What are missing in my script.?

my Json File >

http://deals.ownaroof.com/api/webservices/locations_list.json

Html >

<div ng-controller='prefferedCtrl'>{{locations}}</div>

Script >

(function(){
angular.module('myapp',['ngRoute'])
//afactory to consume webservices and return data to controllers.
.service('webServices',['$http',function($http){
    return {
        getLocations : function(){
            return  $http.get('http://deals.ownaroof.com/api/webservices/locations_list.json').then(function(response){ //wrap it inside another promise using then
                return response.data.response.locations;  //only return locations 
            });
        }
    }
}])
//define controller and inject webServices service as dependency.
.controller('prefferedCtrl',['webServices','$scope',function(webServices,$scope,$ngRoute){ 
    webServices.getLocations().then(function(response){ 
        $scope.locations = response; //Assign data received to $scope.data
    });
}]) 

})();

how to use this json file anyone please suggest me.

Answer 1

First of all i am Hoping This plunker will be helpful to you. As i cross origin issues i save the response in a json file and did this work around like

$http.get('j1.json').success(function(response){ //make a get request to mock json file.
            $scope.data = response; //Assign data recieved to $scope.data
            console.log($scope.data);
        })

Let me know if you have any queries on this

I used your json and simply displayed id and name of your data using ng-repeat HERE ......let me know in which way you want to show this in your html like simple data or you want to show then in a drop down ????