角度js不起作用的动态css

Question

我在html中有这个div，我想在控制器中添加css类。 但它不起作用。请在下面找到html文件和控制器。

  - ＆GT;

app.controller('rolesController', function($scope, $timeout) {




console.log($scope.class+'OutsideClicked');


  $scope.class = "section";


  $scope.changeClass = function(event){
    //console.log(event.offsetX);

    if ($scope.class =="section" || $scope.class =="test")
        {


        //console.log(event.target.getBoundingClientRect());
          console.log($scope.class);

          var style = document.createElement('style');


          style.type = 'text/css';
          var next ='.new{animation-name: anim forwards;animation-duration:2s;animation-fill-mode: forwards;}'; 
          var keyFrames = '@keyframes anim { from {margin-left:'+value+';}to {margin-left:'+value_next+';}}';
          document.getElementsByTagName('head')[0].appendChild(style);

         //   alert(document.getElementById('horse1').className);
            $scope.class = "test";
            console.log($scope.class+'Clicked');
            var e = document.getElementById('horse1');
            var value = window.getComputedStyle(e, null).getPropertyValue("margin-left");
            var value_next = parseInt( value, 10 ) + parseInt( "100px", 10 ) + "px";
            /*alert(value);
            alert(value_next);*/


        }

    $timeout(function () {
        $scope.class = "section";
        console.log('1'+$scope.class);
    }, 5000);

  };
  console.log('2'+$scope.class);




});