How-to call for external XML data within an AngularJS directive?

I can not for the life of me string together the right set of factories, controllers and directives to get this to work. Seems as if it should be simple...

Given some html:

<productcard product="12345"></productcard>

I'd like AngularJS to grab the xml for that product, fill in the template, and plop the new HTML on the page.

http://ift.tt/1pbhmmE

.factory('prodDetails', function($resource) {
   return $resource(':id', { id: '@productId' }, { responseType: "xml" });
})
.controller('prodDetailsCtrl', ['$scope', 'prodDetails'], function($scope, Notes){
  prodDetails.get({productId: 35990});
  console.log("blah")
})
.directive('productcard', function(){
  return {
    scope: {
      productId: "@"
    },
    link: function(scope, iElement, iAttrs) {
      //$scope.blah = prodDetails.query({magId : 12345});
      //prodDetails.get({productId: 35990})
    },
    replace: true,
    template: '<a ng-href="{{reference}}" class="ad-spots"><img title="{{proposition}}" ng-src="http://ift.tt/1pbhmmJ"></a>'
  };
});

I'm really new to Angular and am at a complete loss. I've been through the docs every which way, done the demos and read 100s of posts here on SO. I'm clearly not getting something.

Thanks for any guidance you might provide.