app.js

angular.module('BasicModule', [])
  .config(['$httpProvider', function($httpProvider) {
          $httpProvider.defaults.useXDomain = true;
          delete $httpProvider.defaults.headers.common['X-Requested-With'];
        }
      ])
  .controller('BasicCtrl', function BasicCtrl($http){
    var basic = this;

    basic.events_api_url = "https://gdata.youtube.com/feeds/api/videos/?v=2&alt=json";

    basic.loadEvents = function loadEvents() {
      console.log("Loading Events");
      $http.get(basic.events_api_url)
        .then(function success(data){
          console.log("Success! Result: ");
          console.log(data);
        }, function error(err){
          console.log("ERROR" + err);
        });
    };

    basic.loadEvents();

  });

console_output.txt

Loading Events

question.txt

Why don’t the success or error functions display?

template.html

<div id="basic" ng-app='BasicModule'>
  <div class='tester' ng-controller="BasicCtrl as basic">
  </div>
</div>