AngularJS Example:

HTML

<div ng-app="myApp">
  <div ng-controller="hello">
    <div id="paginateContentsHolder" my:pager="pagingData" class="data-bottom clearfix invisibleForNow" animate="in"></div>
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/angular-1.0.0rc4.min.js"></script>
<style>

JavaScript

var myApp = angular.module('myApp', []);
    
myApp.directive('myPager', function($compile){
  return function linkingFn(scope, element, attr) {
    scope.$watch(attr.myPager, function(newVal, oldVal, scope) {
      if (!newVal) {
        return;
      } else {
        var pagination = angular.element('<div class="pagination pull-right"></div>');
        var paginationList = angular.element('<ul></ul>');
        paginationList.append(angular.element('<li><a ng:click="refresh({ title : \'test\' })">test</a></li>'));
        pagination.append(paginationList);
        element.html('');
        element.append(pagination);
        $compile(paginationList);
      };
    });
  };
});

hello.inject = ['$scope', '$log'];

function hello($scope, $log) {
    $scope.refresh = function(params) {
        console.log(params);
    };
    $scope.pagingData = { title : 'tmp' };
};