CSS keyframe animations only running once in Angular app - angularjs

Question

Updated: In short, my problem seems to be that the DOM stops updating whenever I am calling a function which switches from one state to another in the application.
More interestingly though, this actually only happens the second time this function is called from one particular element.
For specific details, I'm developing an single page app in AngularJS 1.2.28 and one I've stripped my html template, display-widgets.html to contain only 3 elements as follows:
<p data-ng-click="widgetCtrl.onWidgetSelected(widgetCtrl.model.widgetData[0].widget)">widget 1</p>
<p data-ng-click="widgetCtrl.onWidgetSelected(widgetCtrl.model.widgetData[0].widget)">also widget 1</p>
<p data-ng-click="widgetCtrl.onWidgetSelected(widgetCtrl.model.widgetData[1].widget)">widget 2</p>
<p>{{widgetCtrl.interstitialMode}}</p>
The controller looks something like as follows:
widgetShop.widgetCtrl.prototype.showWidgetHome = function (widget) {
this.state.go('widgetHome', {
widgetId: widget.widgetID
});
};
widgetShop.widgetCtrl.prototype.setupInterstitial = function () {
this.interstitialMode = true;
};
widgetShop.widgetCtrl.prototype.onWidgetSelected = function(widget) {
this.setupInterstitial();
this.showWidgetHome(widget);
};
The intended functionality is that after the widget is selected, onWidgetSelected() is called passing the selected widget as a parameter where the animation variable is updated (with the intention to add class with ng-class in the DOM) with setupInterstitial() before another function is called to switch the state. Some interaction will occur on this state, (e.g. add widget to basket) and once complete, the state is switched back to the display-widgets state.
I've stripped the html down here to be just p tags for testing but I've found if you select the same widget(p tag) again, the element is NOT updated in the page as before, and more interesting still is that no DOM updates occur at all. Console logs and alerts show me that angular has updated the correct variables in the controller but the state transition seems to prevent any DOM updates occurring. Selecting the widget 2 will update the DOM as expected, but as with the first widget, this will not occur more than once. Selecting 'also widget 1' after selecting widget 1 will not update the DOM as though it were the second time it were selected, but selecting this before widget 1 will have the same affect as selecting widget 1 first.
Does anybody know if this is a specific issue with browsers not performing animation again because it is a single page app? Or is there likely to be an issue elsewhere in my code? I haven't been able to find anything via google or stack overflow with people having a similar issue.

Answer 1

Sounds like once you've added the class, it is never removed again.
Once the class is added, the animation starts. When you add it again nothing changes because it already had that class and all the styling was already applied.