Combining angular-ui progressbar with ngClass

Question

I would like to combine the directive progress from angular-ui, with the directive ngClass.

So far I don't get any reactions at all. Am I doing this wrong, or is it not possible to combine?

What I want is a progressbar that has the class active when the background process is working, but turns off when it's complete or errnous.

HTML:

<progress max="100" percent="progress" class='progress-striped' 
    ng-class='{"active": active}'></progress>  

JS:

$scope.active = true;
$scope.progress = {value:10, type:"danger"};

See my plunkr at http://plnkr.co/edit/koR0VnTKdpnhhMuD16hl

Cheers!

Answer 1

I suggest you also to try ng-style. Your problem is solved here

<div class="container_progress">
     <div class="progress progress-striped"   ng-class='{"active": active, "":!active}'>
       <div  class="bar" ng-style="bar_upload_style" >{{bar_upload_text}}</div>  
     </div>
</div>

And in controller:

updateProgressBar(20);

 $timeout(function()
 {
 updateProgressBar(100);
 }, 4000);


function updateProgressBar(value){
 $scope.bar_upload_style = {  "width": value+'%'  };
 $scope.bar_upload_text = value + "%";

 if(value ==100) $scope.active = false;
}

See Plunker

In my case I took progress bar from bootstrap as is and changed %