Angular: how to animate the background color of a ul list item when text changes

Question

I have seen quite a few posts about animating a property (e.g. background color) of a property when the text changes, using a $watch, but how can I do this (in a directive link function) for a list item when the text changes.

So, if I have the css..

.lion li{     
background: yellow;
-webkit-transition: background 1s; 
transition: background 1s;
}

In the html, the directive attaches to I have

<ul ng-repeat="p in properties">
    <li>{{p}}</li>                
</ul>

In another post, I saw the suggestion to add and remove a class, but doesn't seem to work for me.

I tried the following in a link function...

function link(scope, element, attrs) {              
  scope.properties = [];
  scope.properties.push("Prop 1");
  scope.properties.push("Prop 2");
  scope.properties.push("Prop 3");
  scope.properties.push("Prop 4");

  scope.$watch('properties[0]', function () {        
    element.addClass('lion');              
    element.removeClass('lion');        
  });
};

If I externally change the text on property[0], then the watch function is called. But 3 problems here.

1. First of all, the background change does not seem to fade in and then out
2. If I remove the removeClass so I can see the background go yellow, all of the lis are colored not just the changed one.
3. I would hope I don't need to add a $watch for each list position, eg here I have just done at index 0, but I would want to apply this a li at any index

I will update an existing example on Plunker as soon as it comes up again (it seems to be offline). Meanwhile, does anyone have any other suggestions for doing this?

Thanks in advance for any suggestions.