Ionic + Yummly API Error

ionic-v1
1

Hi All!

I am currently building my first Ionic app and so far so good!!
I am creating a recipes app with the Yummly API (https://developer.yummly.com/documentation/).

However I am struggling to work with the api as I keep getting the same error

Error in ./HomePage class HomePage - inline template:17:8 caused by: Cannot read property 'recipeName' of undefined

I am using angular to print from the api, my simple markup is

<div ng-controller="MainController">
  <div ng-repeat="result in results">
    <h1>{{result.recipeName}}</h1>
  </div>
</div>

and js

var app = angular.module('tastem8', []);

app.controller('MainController', function($scope, $http) {
var url = 'http://api.yummly.com/v1/api/recipes?_app_id=397aed16&_app_key=69e2565adcec7a6609b18bef31261e62&q=onion+soup&allowedCuisine[]=cuisine^cuisine-american&callback=JSON_CALLBACK';
var promise = $http.jsonp(url);

$scope.loading = true;

promise.then(function(response) {
	var results = response.data.matches;
	console.log(response);

	$scope.results = results;
	$scope.loading = false;
});
});

I have created a codepen (https://codepen.io/BradArnott/pen/YNGjjR) with the exact same code, however it is working fine and as I would want it to, just to see how the api works pretty much. I didn’t know if there is something to do with ionic that would make it different to work with? If this could be explained as I am pretty new to this framework and web apps overall.

Thanks!