unable to access isolated scope's variables from this with the controllerAs syntax / style.

ctrl.js

+(function(angular, _, undefined) {
  function PaginationCtrl($scope) {
    // view-model
    var vm = this;

    vm.decodeQuery = decodeQuery;
    vm.getData = getData;
    vm.goToPage = goToPage;

    /**
     * [goToNextPage description]
     * @return {[type]} [description]
     */
    function goToPage() {
      console.log('gotoPage Called');
      // Call pre-phase callback
      if ( !_.isUndefined(vm.prePhaseCallback) ) {
        vm.prePhaseCallback();
      }

      vm.getData();
    }

    function getData() {
      var promise = vm.callback();

      // Call post-phase callback
      if ( !_.isUndefined(vm.postPhaseCallback) ) {
        vm.postPhaseCallback();
      }

      return promise;
    }

    function decodeQuery(query) {
      return decodeURIComponent(
        (query + '').replace(/\+/g, '%20')
      ) || '';
    }
  }

  angular
    .module('app')
    .controller(
      'PaginationCtrl',
      PaginationCtrl
    );
})(angular, _);

directive.js

+(function(angular, _) {
  function pagination() {
    // callback is called when the data is being fetched
    // prePhaseCallback, called before the data is fetched
    // postPhaseCallback, called after the data is fetched
    var scope = {
      callback: '&',
      prePhaseCallback: '&',
      postPhaseCallback: '&',
      direction: '@'
    };

    return {
      scope: scope,
      restrict: 'EA',
      transclude: true,
      template: getTemplate,
      controller: 'PaginationCtrl',
      controllerAs: 'pagination'
    };

    /**
     * Simply generates the template string
     * @return string
     */
    function getTemplate() {
      return [
        '<div ng-transclude ng-click="pagination.goToPage()">',
        '</div>'
      ].join('');
    }
  }

  angular
    .module('app')
    .directive('ssPagination', pagination);
})(angular);