AngularJS Bootstrap Popover Button Ignoring <BR />

We have an Angular Bootstrap popover tooltip that contains some html content and scope variables along with a button inside the popover.

Currently we have a small version running in Plunkr and the popover html is being displayed correctly including all break tags.

The problem seems to occur when we run in locally in Visual Studio where all of the break tags are recognized until the button is rendered, then it seems to be completely ignored and the button gets dropped at the top of the popover:

<div>
    Name: {{ person.fullName }}
    <br />
    Dept: {{ person.deptId }}
    <br />
    Job Desc: {{ person.jobDesc}}
    <br />
    Phone:{{ person.phone}}
    <br />
    One!<br />
    Two!<br />
    Three!<br />
    <input type="button" value="Click Me" class="btn btn-default" ng-click="changeName()">

We saw a couple of posts where $sce.trustAsHtml was used and added that as well as data-html='true'

scope.htmlPopover = $sce.trustAsHtml('./HTML/popoverTemplate.html');
element[0].setAttribute('data-html', 'true');
element[0].setAttribute('uib-popover-template', "htmlPopover");
element[0].setAttribute('popover-append-to-body', 'true');
element[0].setAttribute('popover-trigger', "'click'");

This did not solve our problem.

Both the Plunk and our local project are running Angular 1.6.2 and Angular Bootstrap 2.5.0.

Can't figure out why this would work in Plunkr and not in Visual Studio.

Am I missing something?

Thanks.

Solution

We had a css in our cshtml page where there was an existing .btn class that was causing a conflict.

Since I think the last css entry wins, I suspect that was causing the issue.

Once we removed that style, the button was displayed correctly.

Thanks.