Угловая ошибка при попытке получить JSON

Question

Я пытаюсь получить простой список JSON и вставить его в раскрывающийся список.

Однако я получаю сообщение об ошибке из следующего JS.

var rac  =  angular.module('rac', ['angular.filter']);

rac.controller('prodCtrl', function($scope, $http, $sce, $filter){
  var dataURL = 
$sce.trustAsResourceUrl('http://www.mocky.io/v2/5b1ef454310000fa163ffa45');
  $http({
    method: 'JSONP',
    url: dataURL
  }).then(function ($scope, response) {
    $scope.products.data = response;
    console.log($scope.products);
  }, function (response) {
    console.log("Mr. Data. Report! " + response);
  });   
});

Мой HTML:

<div class="row">
<div class="container">
  <h1>Leonard Zakoor - Rolled Alloys </h1>
  <div ng-controller="prodCtrl">
    <h3>Please choose a product</h3>
    <select>
      <option ng-repeat="product in products">{{product.name}}</option>
    </select>


  </div>

</div>

Я получаю ошибку: TypeError: Невозможно установить свойство 'data' из неопределенного

На линии 9

$scope.products.data = response;

Answer 1

Вам нужно определить $scope.products = [];

, а затем повторить ng,

 <option ng-repeat="product in products">{{product.name}}</option>

РЕДАКТИРОВАТЬ: Я сделал несколькоизменяется по запросу следующим образом:

rac.controller('prodCtrl', function($scope, $http, $sce, $filter) {
  $http.jsonp($sce.trustAsResourceUrl("https://www.mocky.io/v2/5b1ef454310000fa163ffa45"), {
      jsonpCallbackParam: 'callback'
    })
    .then(function(data) {
        $scope.products = data.data.products;
      },
      function(error) {}
    );
});

WORKING DEMO