ui.bootstrap deforms the <progress> HTML tag
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.
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>
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)