Angular: jQ effect on binding change

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="http://code.angularjs.org/1.0.0rc1/angular-1.0.0rc1.js"></script>
<div ng:app="my">
  <a ng:click="counter=counter+1">change</a><br />
  <span ng:bind-template="{{counter}}" effect></span>
</div>

CSS

span {
  font-size: 1.4em;
  font-weight: bold;
}

JavaScript

angular.module('my', []).directive('effect', function() {
    return function(scope, elm, attr) {
        attr.$observe('ngBindTemplate', function(value) {
            if (value) elm.effect('bounce');
        });
    };
});