using jquery colorbox to render an angularjs template dynamically

I'm using routes to render the body of a template, see below. The template loads and there are no issues at this point.

When a user clicks within the rendered template(/templates/my-details) on a link, i would like to trigger a colorbox popup and use another angular template populated with the my_object data, which is available in the route.

I wrote a custom directive to handle the code that will trigger on click, get the template and compile it. then pass the contents of that to colorbox to use.

The issue i have is the compiled_template has not rendered correctly. I would have assumed the scope passed into $compile(template)(scope), would contain the object my_object for the template /templates/my-buy to use, however it appears not to as the compiled template ignores any expressions, directive etc.. that reference my_object.

This use to work before i had routing and had a much simpler page, with directive elements to define the ng-controller. I can only assume the scope that I'm passing in is not the scope for the route provider I'm using. "/".

my_app.config(function($routeProvider) {
        $routeProvider.
          when('/', {
            templateUrl: '/templates/my-details',
            controller: 'MyShowCtrl',
            resolve: {
                my_object: function(myService, settingsService){
                    return dealService.getDeal(settingsService.init().my_guid);
                }
            }   
          }).
          otherwise({
            //redirectTo: '/'
          });
    });

my_app.directive('colorbox', function($compile, $templateCache,$rootScope){
      return {
        link: function(scope, element, attrs){
          element.click('bind', function(){

            // get template from cache process and apply to colorbox
            var template = $templateCache.get('/templates/my-buy');
            var compiled_template = $compile(template)(scope);      

            $.colorbox({
              html: compiled_template,
              width: "600px",
              height: "600px"
            });

          });
        }
      };
    });