Printing Flickr API Response to Console AngularJS

I'm currently trying to make the API call work and want to see if it has managed to return the API data from the external source.

How do I print an output to the console from the app.js file, so that in this case I can see whether the API call has been returned?/is there a better way of doing this that I'm missing?
Should I be using $http or $resource?

Current code: js/app.js

var app = angular.module('imageViewer', ['ng', 'ngResource']);

  function AppGallery($scope, $http) {
    $http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?').success(function (data) {
      $scope.data = data;
      log(data);
    });
  };

<!DOCTYPE html>
<html ng-app="imageViewer">
<head>
  <title>Photo Viewer</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular-resource.js"></script>
  <script src="js/app.js"></script>
</head>

<body ng-controller="AppGallery">

  {{data}}

</body>
</html>

Solution

This actually works a bit differently. You will have to define the callback function jsonFlickrFeed. Check the code below.

You will notice two things here:-

We're requesting the data with parameter ?format=json. Check the response here.
You'd notice that the response coming out is looking for a callback function jsonFlickrFeed. Just define the handler for data into this function and there we go.

  var app = angular.module('imageViewer', ['ng', 'ngResource']);

  app.controller('AppGallery',[ '$scope','$http', function AppGallery($scope, $http) {
    $http.jsonp('https://api.flickr.com/services/feeds/photos_public.gne?format=json').success(function (data) {
      
    });
	
	jsonFlickrFeed = function(data){
	$scope.data = data;
	 console.log(data);
	}
  }]);

<!DOCTYPE html>
<html ng-app="imageViewer">
<head>
  <title>Photo Viewer</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular-resource.js"></script>
  <script src="js/app.js"></script>
</head>

<body ng-controller="AppGallery">

  {{data}}

</body>
</html>

Check here and for more information.
If you're using jQuery you can use jQuery.getJSON instead. More details regarding jQuery.getJSON .

Hope this helps! Please mark as answer if it does! Thanks!