youtube api

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Angular js</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    <script src="myscript.js"></script>
<body>
<h1>YouTube Search</h1>
<div ng-controller="mainCtrl">
  <form ng-submit="doSearch()" name="myForm">
  <input type="text" ng-model="query" required>
  <input type="submit" value="search" ng-disabled="myForm.$invalid">
</form>
  <h2>Results</h2>
  <ul ng-show="results.length" style="list-style:none;padding:0">
    <li ng-repeat="result in results">
        <img ng-src="{{result.media$group.media$thumbnail&#91;0&#93;.url}}">
        {{result.title.$t}}
    </li>
  </ul>
  <p ng-hide="results.length">↑から検索してください。</p>
</div>
</body>
</html>
var mainCtrl = function($scope, $http){
 	$scope.doSearch = function(){
 			var url = 'https://gdata.youtube.com/feeds/api/videos?'
 			+ [
 				'q=' + encodeURIComponent($scope.query),
 				'alt=json',
 				'max-results=10',
 				'v=2',
 				'callback=JSON_CALLBACK'
 			].join('&');
 			$http.jsonp(url).success(function(data){
 				// console.dir(data);
 				$scope.results = data.feed.entry;
 			});
 	}

}