ui-bootstrap dropdown not working

Question

I am trying to migrate a static site made with bootstrap to angular using ui-bootstrap which is turning out to fight me every step of the way, so I need someone who has maybe worked with ui-bootstrap before to point me in the right direction. I'm still somewhat new to Angular, but I'm completely new to bootstrap and ui-bootstrap I usually just try to roll my own CSS.

Here is the working static bootstrap html with some irrelevant details removed:

<div class="top-bar">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 hidden-sm-down">
                    <ul class="list-inline">
                        <li class="list-inline-item"><a href="javascript:void(0)"><i class="ion-ios-telephone"></i>Location 1: 1.111.111.1111</a></li>
                        <li class="list-inline-item"><a href="javascript:void(0)"><i class="ion-ios-telephone"></i>Location 2: 1.111.111.1111</a></li>
                    </ul>
                </div>
                <div class="col-sm-6 text-right">
                    <ul class="list-inline">
                        <li class="loc list-inline-item">
                           <a href="#" data-toggle="dropdown" class="dropdown-toggle">Get Directions</i></a>
                            <ul class="dropdown-menu loc-dropdown">
                                <li><a href="https://www.google.com/maps" target="_blank"><i class="ion-android-car flag"></i> Location 1</a></li>
                                <li><a href="https://www.google.com/maps"><i class="ion-android-car flag" ></i> Location 2</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

When I was first having this trouble I found this thread:

Angularjs bootstrap dropdown not working

so I tried the first solution which obviously did not work, and here is what I have trying to apply the second updated fix:

<div class="top-bar">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 hidden-sm-down">
                    <ul class="list-inline">
                        <li class="list-inline-item"><a href="javascript:void(0)"><i class="ion-ios-telephone"></i>Location 1: 1.111.111.1111</a></li>
                        <li class="list-inline-item"><a href="javascript:void(0)"><i class="ion-ios-telephone"></i>Location 2: 1.111.111.1111</a></li>
                    </ul>
                </div>
                <div class="col-sm-6 text-right">
                    <ul class="list-inline">
                        <li uib-dropdown class="loc list-inline-item">
                           <a uib-dropdown-toggle class="dropdown-toggle">Get Directions</i></a>
                            <ul uib-dropdown-menu class="dropdown-menu loc-dropdown">
                                <li><a href="https://www.google.com/maps" target="_blank"><i class="ion-android-car flag"></i> Location 1</a></li>
                                <li><a href="https://www.google.com/maps"><i class="ion-android-car flag" ></i> Location 2</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

And nothing is happening, no errors no anything. I don't even get a cursor:pointer, even though I added

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

To the top of my css like ui-bootstrap says to.

I tried downloading ui-bootstrap instead of using the cdn and it made no difference. Originally this was all in the template of a nav directive I was building and I thought this might have been causing problems but I moved everything to the home state and I'm having the same problems. I tried moving everything in the dropdown directive controller in the home state controller and nothing happened. I also tried to copy and paste the dropdown example plunker html and js into my project and still had the same results..

Things that may be of note:

I'm using gulp to bundle my js and custom css, neither of which have anything applied to this snippet though.

I'm using a nodemon to serve this up on localhost

I'm using these CDNs for CSS:

<!-- Normalize -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" />
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

and these for JS:

<!-- angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<!-- angular animate -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<!-- angular sanitize -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<!-- angular ui-router -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<!-- angular ui-bootstrap -->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>

I'm just at a loss here, I must be missing something that's right under my nose that I can't see.