angular1-ui-bootstrap4 dropdown in navbar not working

Hi I need to have a working dropdown using angularjs ui-bootstrap. This HTML is set up according to the DOCS but doesn't seem to want to open or close the dropdown item..

var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ngTouch', 'ui.bootstrap']);

<ul class="navbar-nav flex-row">
    <li class="nav-item">
        <span uib-dropdown on-toggle="toggled(open)">
            <a class="nav-link" href id="simple-dropdown" uib-dropdown-toggle>
                <span class="align-middle"></span>
            <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
                <a class="dropdown-item" href="account/settings">
                    <span class="ion ion-gear-a align-middle mr-2"></span>
                    <span class="align-middle">Settings</span>
                <a class="dropdown-item" href="account/logout">
                    <span class="ion ion-log-out align-middle mr-2"></span>
                    <span class="align-middle">Logout</span>