javascript – How to change a :after class in angularjs using ng-class?


I have a div with an after and I would like to change the background color of this after dynamically via the controller, but I am not having success importing the ng-class into the parent div.

<div class="infos" ng-class="myController.infoBlue">
   My Infos.

Obs: I have different styles in the div and the :after. The div has a background of one color and my after has a background of another color and I want to change only the after.


Take a look at the code below and see if it helps.

Or see working at

<!doctype html>
    <html ng-app>
        <script src=""></script>
    function Ctrl($scope) {
      $scope.items = [{'color' : 'blue'}, {'color':'red'}, {'color':'green'}];
      $scope.selection = $scope.items[0];


            content: " - in Blue";
            color: #fff;

            content: " - in Red";
            color: #fff;

            content: " - in Green";
            color: #fff;


    <div ng-controller="Ctrl">
      <p ng-class="selection.color">I love Brazil! </p>

      <select ng-model="selection" ng-options="item.color for item in items">
Scroll to Top