Angular Resource

using the high-level abstraction of $http resource

HTML

<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<script src="http://code.angularjs.org/1.0.7/angular-resource.min.js"></script>
<div ng-app="app">
    <div ng-controller="WebService">
        <div ng-repeat="service in services">
            {{service}}
        </div>
    </div>
</div>

JavaScript

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

myApp.factory('videoApi', function ($resource) {


    
    
      return $resource(         'https://www.googleapis.com/youtube/v3/search', 
             {callback: 'JSON_CALLBACK'},
             { 
              get: { 
                method: 'JSONP', 
                params: { 
                  order: 'date',
                  part: 'snippet',
                  channelId: 'UCY8ZYY7YSQ80JW1Ijo2BJvA',
                  type: 'video',
                  key: 'AIzaSyBrmLZjy9P_HfGslKK6VzwKRhP3eVUqLVk' },
                isArray : false,
              } 
            } );


});


myApp.controller('WebService', function ($scope, videoApi) {
       
       $scope.services = videoApi.get();
});