ui.bootstrap deforms the <progress> HTML tag

Question

In my HTML file I have a <progress> tag and I also injected the ui.bootstrap dependency to my controller as follows:

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

In this configuration, AngularJS converts the <progress></progress> into:

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

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

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

So, how can I make this progress bar work? Or, how can I disable the progress directive of angular-ui without removing the dependency?

Thanks in advance.

Answer 1

I just ran into this same issue. A simple workaround is to use ng-non-bindable which is a standard angualr directive. The drawback is you can't use any angular directives or bindings within the progress element.

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

Answer 2

I am 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 seems to work fine. (look at external resources)