Angular: jQ effect on binding change

HTML

<script src="http://ci.angularjs.org/job/angular.js-angular-master/lastSuccessfulBuild/artifact/build/pkg/0.10.7-5d8528cc/angular-0.10.7-5d8528cc.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.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');
        });
    };
});