Angular filter problem

by tedbeer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular.js"></script>
<div>
    <button rundigest="true">run digest</button>
    <button newtrans="true">update filter</button><br />
    <cs-searchbox texthere="some text"></cs-searchbox>
</div>

JavaScript

var app = angular.module("app", []);
var prefix = 0, cnt = 0;

app.filter("translate", [function() {
	var filter = function(id) {
        console.log(cnt++, id);
        return prefix + ':' + String(id).toUpperCase();
	};
    /**
     The change to make it work in AngularJS 1.3
     */
    filter.$stateful = true;
    return filter;
}]).directive("csSearchbox", [function () {
	return {
			restrict: "E",
			replace: true,
			scope: {
				searchModel: "=",
				texthere: "@"
			},
			template: '<input type="text" placeholder="{{texthere|translate}}"></input>'
		};
}]).directive("rundigest", ["$rootScope", function ($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.on('click', function(){
                console.log('***** digest ********');
                $rootScope.$digest();
            });
        }
    };
}]).directive("newtrans", ["$rootScope", function ($rootScope) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.on('click', function(){
                prefix++;
                $rootScope.$digest();
            });
        }
    };
}]);