Ui.bootstrap warps the HTML <progress> tag

Question

In my HTML file, I have a <progress> , and I also entered the ui.bootstrap value for my controller as follows:

 var myApp = angular.module("myApp",["ui.bootstrap"]); 

In this configuration, AngularJS converts <progress></progress> to:

 <div class="progress ng-isolate-scope" ng-transclude=""></div> 

When I remove "ui.bootstrap", it works fine. You can play this sample JSFiddle.

When progress turned into <div class="progress ng-isolate-scope" ng-transclude=""></div> it disappears. I understand that ui.bootstrap has a directive called progress that does this conversion.

So how can I make this work indicator work? Or, how can I disable the progress angular -ui directive without removing the dependencies?

Thanks in advance.

Answer 1

I ran into this problem. A simple workaround is to use ng-non-bindable, which is the standard angualr directive. The disadvantage is that you cannot use any angular directives or bindings within the progress element.

 <progress ng-non-bindable></progress> 

Answer 2

I'm not sure if I understand your question or which version of uiBootstrap you are using.

The directive should be:

 <div ng-controller="MainCtrl"> <progressbar value="55"></progressbar> </div> 

I changed the version of uiBootstrap and included the necessary bootstrap.min.css in this forked Fiddle and everything works fine. (look at external resources)