Triggering function on click inside a directive using AngularJS

I have the following directive working correctly:

  app.directive('theDirective',  ['musicInfoService',
  function(musicInfoService) {
  return {
    restrict: 'A',
    scope: { position: '@', last: '@', release: '=',
        artist: '=', versions: '@' },
    link: function(scope, element, attrs) {

      element.bind('click', function() {
        // Highlight clicked element
        angular.element(document.querySelector('.clicked')).removeClass('clicked');
        element.addClass('clicked');

        // Create the collapse element or select existing one
        var collapseQuery = document.querySelector('#collapse');
        var collapse = collapseQuery === null ?
          angular.element('<div id="collapse" ng-controller="VersionController" class="col-md-12 col-xs-12"> \
                <div class="inner"> \
                  <ul> \
                    <li class="title">{{release.title}}</li> \
                    <li class="row top" ng-show="versions"> \
                      <div class="col-md-1">Year</div> \
                      <div class="col-md-3">Format</div> \
                      <div class="col-md-3">Label</div> \
                      <div class="col-md-2">Country</div> \
                      <div class="col-md-2">Cat. Nº</div> \
                    </li> \
                    <li class="row" ng-show="versions" ng-repeat="version in versions | filter: \'!file\' | orderBy: version.released"> \
                      <div class="col-md-1">{{(version.released | release:4) || \'-----\'}}</div> \
                      <div class="col-md-3">{{version.format}}</div> \
                      <div class="col-md-3">{{version.label}}</div> \
                      <div class="col-md-2">{{version.country}}</div> \
                      <div class="col-md-2">{{version.catno}}</div> \
                    </li> \
                    <li class="row top" ng-hide="!release.format"> \
                      <div class="col-md-1">Year</div> \
                      <div class="col-md-3">Format</div> \
                      <div class="col-md-3">Label</div> \
                    </li> \
                    <li class="row" ng-hide="!release.format"> \
                      <div class="col-md-1">{{release.year}}</div> \
                      <div class="col-md-3">{{release.format}}</div> \
                      <div class="col-md-8">{{release.label}}</div> \
                    </li> \
                  </ul> \
                </div> \
              </div>') :
          angular.element(collapseQuery);

        // Based on the position of the clicked element calculate the rounded number up to the nearest multiple of four
        var calculatedPosition = Math.ceil(scope.position / 4) * 4;

        // Get the element at the calculated position or the last one
        var calculatedQuery = document.querySelector('[position="' + calculatedPosition + '"]');
        if (calculatedQuery === null) calculatedQuery = document.querySelector('[last="true"]');;

        var calculatedElement = angular.element(calculatedQuery);

        // Insert the collapse element after the element at the calculated position
        calculatedElement.after(collapse);
        // Highlight the calculated element
        angular.element(document.querySelector('.calculated')).removeClass('calculated');
        calculatedElement.addClass('calculated');
      });

      scope.$on('$destroy', function() {
        element.unbind('click');
      });
    }
  };
}
]);

The problem is that I can't find a way to integrate in it the necessary function to populate the fields in the directive on the element.bind('click').

The function looks like this:

 var versions = scope.release.format;
 musicInfoService.getReleaseVersions(scope.release.id)
    .success(function(data) {
        if (data.error) return;

        var format = data.versions,
        formats = scope.release.format;

        if (format !== '') {
        formats = format;
        }

        scope.versions = formats;
    })

The scope.release.id and scope.release.format come from another $http call.

Here's a Plunker to illustrate the error (the function in question is commented out in line 49 in directive.js).

Any pointers?