angular.js - update scope and template after jsonp request

I created a directive that loads some html code inside a tag:

directive:

var appDirectives = angular.module("skdApp", ["offerServices"]);
appDirectives.directive("widget", function() {
  return {
    restrict: 'A',
    template: '<div ng-controller="OfferCtrl"><p>{{offer.price}}</p></div>';
  }

service
Besides, I'm using a service to fetch some json data

angular.module('offerServices', ['ngResource']).
  factory('Offer', function ($resource) {
    return $resource('url/offer.json', {},
      {
        get: {method: 'JSONP', params: {callback: 'JSON_CALLBACK'}}
      }
    );
});

controller
The controller adds the received data to the scope

function OfferCtrl($scope, Offer) {
  $scope.offer = Offer.get();
}

Now I'm facing the following problem. By the time the template is being loaded, the json request is not finished yet. This results in showing the template with an empty string for {{offer.price}}.

I would need a way to update the template with the corresponding values, once the offerServices has received a response (i.e. the offerService response is available)

Any ideas?