JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="ctrl as vm">
        <div>
            <button ng-click="vm.search('1 Microsoft Way, Redmond, WA 98052, United States')">click here!</button>
        </div>
        <div>
            <div id='mapDiv' class="bing-map"></div>
        </div>
    </div>
    <div id="infoBox" style="display: none">
        <div id="infoboxText"></div>
    </div>
    <div id="infoBoxContents" style="display: none;"><b id="infoboxTitle" ng-bind="vm.searchResult"></b>
        <p id="infoboxDescription">Select this address as the correct address?
            <button ng-click="vm.selectAddress()">YES!</button>
        </p>
    </div>
</div>

CSS

#mapDiv {
    position: absolute;
    width: 800px;
    height: 400px;
}
#infoboxText {
    background-color: White;
    border-style: solid;
    border-width: medium;
    border-color: DarkOrange;
    min-height: 100px;
    width: 240px;
}

#infoboxTitle {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 220px;
}

#infoboxDescription {
    position: absolute;
    top: 30px;
    left: 10px;
    width: 220px;
}

JavaScript

Microsoft.Maps.loadModule('Microsoft.Maps.Search');

var myApp = angular.module('myApp', []);
myApp.controller('ctrl', ['$compile', '$scope', function ($compile, $scope) {
    var _this = this;
    this.map=null;
    this.selectedAddress = '';
    this.initialiseBingMaps = function () {
        var apiKey = 'Aqdy7iE9kU60ShePbvQ4LNhekJqK7e93krjafBgdcITss-CBG4h137aNqbVVDIaa';
        _this.map = new Microsoft.Maps.Map(document.getElementById('mapDiv'), {
            credentials: apiKey,
            center: new Microsoft.Maps.Location(-33.9, 151.2),
            zoom: 10,
            showScalebar: true
        });
    };
    this.search = function (terms) {
        var search = new Microsoft.Maps.Search.SearchManager(_this.map);
        search.geocode({
            where: terms,
            count: 10,
            callback: _this.searchSuccess,
            errorCallback: _this.searchError
        });
    };
    this.searchSuccess = function (geocodeResult, userData) {
        var result = geocodeResult.results[0];
        var location = result.location;
        var viewOptions = {
            center: location,
            zoom: 16
        };
        _this.map.setView(viewOptions);
        _this.map.entities.clear();
        
        var template = $('#infoBox').html().trim();
        var pin = new Microsoft.Maps.Pushpin(location, {
            draggable: false
        });
        var infoboxOptions = {
            pushpin: pin
        };
        var defaultInfobox = new Microsoft.Maps.Infobox(_this.map.getCenter(), infoboxOptions);
        defaultInfobox.setHtmlContent(template);
        _this.map.entities.push(defaultInfobox);
        var rawGutsHtml = $('#infoBoxContents').html();
        $("#infoboxText").html(_this.$compile(rawGutsHtml)(_this.$scope));
        _this.$scope.$apply();
    };
    this.selectAddress = function () {
        alert('Selected something');
    };
    this.searchError = function () {};
    this.$compile = $compile;
    this.$scope =...