After correctly installing the following dependencies:
"ui-bootstrap": "0.12.2",
"ngAnimate": "1.5.5",
"AngularJs": "1.5.5I encountered an issue with creating a dropdown menu in my HTML view. Despite no visible errors and successful implementation of other AngularJS features, the dropdown menu does not display as expected. Below is the HTML code snippet:
<div class="btn-group" uib-dropdown dropdown-append-to-body>
<button id="btn-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle>
DropDown <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-body">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
Additionally, I included the relevant JavaScript code below:
var myApp = angular.module('app', ['ui.bootstrap','ngAnimate']);
myApp.controller('Controller', ['$scope', '$http', '$log', function($scope, $http, $log) {
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
$scope.appendToEl = angular.element(document.querySelector('#dropdown-long-content'));
}]);