<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>angular testing</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="php">
      <p ng-repeat="p in jsony">{{p.name}} kosztuje {{p.price}}</p>
      <p ng-repeat="p in php">{{p}}</p>
    </div>
    <script type="text/javascript">
    var app = angular.module('myApp', []);
    app.factory('loadData', ['$http', function($http){
     var loadData = {};
     loadData.getItems = function(){
       var a = [{name: 'japko', price: 5},{name: 'banan', price: 15},{name: 'gruszka', price: 55},{name: 'pietruszka', price: 135}];
       console.log(a);
       return a;
     }
     loadData.getItemsFromPHP = function(){
       var apiURL = 'http://192.168.100.21:1337/API/';
       var items;
        $http.get(apiURL+'items.php').then(function(response){
          console.log(response.data);
          items = response.data;
        }, function(response){
          return 'error';
        });
        return items;
     }
     return loadData;
    }]);
    app.controller('php', ['$scope', 'loadData', function($scope, loadData) {
      $scope.jsony = loadData.getItems();
      $scope.php = loadData.getItemsFromPHP();
       }]);
    </script>
  </body>
</html>