Angularjs Can't pass json data to directive from controller

Question

I am new to Angularjs and I am trying to pass json data from controller to directive.The result is nothing showed and I got the following errors:

1.Uncaught SyntaxError: Unexpected token } in line 29.

2. angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/ $injector/modulerr?p0=myApp&p1=Error%3A%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)

I don't know exactly how to fix this errors.

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl"> 
  <display simo='simo'></display>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
    $http.jsonp("http://localhost/json/customer.php?callback=JSON_CALLBACK")
        .success(function (data) {
            $scope.simo = data;
            console.log($scope.simo)
        });

});

app.directive('display',function(){
    return {
        restrict: 'E',
        scope: { simo: '=' },
        template: '<li ng-repeat="x in simo">{{ x.Name + ', ' + x.Country }}</li>'
    };
});
</script>

Edit: Remote file is

{
  "records": [
    {
      "Name": "Alfreds Futterkiste",
      "City": "Berlin",
      "Country": "Germany"
    },
    {
      "Name": "Ana Trujillo Emparedados y helados",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Antonio Moreno Taquería",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Around the Horn",
      "City": "London",
      "Country": "UK"
    },
    {
      "Name": "B's Beverages",
      "City": "London",
      "Country": "UK"
    },
    {
      "Name": "Berglunds snabbköp",
      "City": "Luleå",
      "Country": "Sweden"
    },
    {
      "Name": "Blauer See Delikatessen",
      "City": "Mannheim",
      "Country": "Germany"
    },
    {
      "Name": "Blondel père et fils",
      "City": "Strasbourg",
      "Country": "France"
    },
    {
      "Name": "Bólido Comidas preparadas",
      "City": "Madrid",
      "Country": "Spain"
    },
    {
      "Name": "Bon app'",
      "City": "Marseille",
      "Country": "France"
    },
    {
      "Name": "Bottom-Dollar Marketse",
      "City": "Tsawassen",
      "Country": "Canada"
    },
    {
      "Name": "Cactus Comidas para llevar",
      "City": "Buenos Aires",
      "Country": "Argentina"
    },
    {
      "Name": "Centro comercial Moctezuma",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Chop-suey Chinese",
      "City": "Bern",
      "Country": "Switzerland"
    },
    {
      "Name": "Comércio Mineiro",
      "City": "São Paulo",
      "Country": "Brazil"
    }
  ]
}

Answer 1

I'd give this a shot http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

<script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
    $http.jsonp("http://localhost/json/customer.php?callback=JSON_CALLBACK")
        .success(function (response) {
            $scope.simo = response.data;
            console.log($scope.simo)
        });

});

app.directive('display',function(){
    return {
        restrict: 'E',
        scope: { simo: '=' },
        template: '<li ng-repeat="x in simo">{{ x.Name + ', ' + x.Country }}</li>'
    };
});
</script>

Not sure if your intent was to pass the entire response object to the directive, but response.data is the location of what you're likely expecting back from the ajax call.

Aside from that I would make sure that your object structure is correct. Or if you're returning an array that you set that flag in the $http call.

Answer 2

@KKKKKKKK beat me to it in a comment, but the problem is in the template property. For example (replacing the call to the HTTP backend with static test data, so that the code can run without it), the following works:

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl"> 
  <display simo='simo'></display>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('customersCtrl', function($scope, $http) {
    $scope.simo = [{
      Name: 'Frodo',
      Country: 'The Shire'
    }, {
      Name: 'Boromir',
      Country: 'Gondor'
    }];
  });

  app.directive('display',function() {
    return {
      restrict: 'E',
      scope: { simo: '=' },
      template: '<li ng-repeat="x in simo">{{ x.Name }}, {{ x.Country }}</li>'
    };
  });
</script>