Animate a bootstrap badge on change

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script data-require="angular-animate@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-animate.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <style>
      .change-add {
          transition: all 0.1s;
        -webkit-transition: all 0.1s ease-in-out;
      }
      .change-remove {
          transition: all 0.8s;
        -webkit-transition: all 0.8s ease-in-out;
      }
      .change {
        background-color: red!important;
        transform: scale(1.5);
      }
  </style>
  </head>

  <body ng-app="app">
    <div ng-init="value = 42">
      <input ng-model="value" />
      <button class="btn btn-primary">
        Products
        <span animate-change="value" ng-bind="value" class="badge"></span>
      </button>
    </div>
  </body>

</html>

var app = angular.module('app', ['ngAnimate'])

app.directive('animateChange', function($animate) {
  return function(scope, elem, attr) {
      var current;
      scope.$watch(attr.animateChange, function(nv, ov) {
        if (nv != ov) {
            var c = 'change';
            current && $animate.cancel(current);
            current = $animate.addClass(elem,c);
            current.then(function() {
              current = $animate.removeClass(elem,c);
            });
        }
        
      })  
  }  
})