I made a quick bootstrap ui demo of a select box drop down menu using AngularJS, Angular UI and Bootstrap. It loads the data for the select box from an external JSON file (on the same domain), just a list of countries for user selection.
Angularjs Bootstrap UI Drop Down Demo
app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
angular.module('plunker', ['ui.bootstrap']); var testController = ['$scope', '$http', function($scope, $http) { $scope.status = 'loading...'; $scope.country = "Select Country"; $scope.data = { "locations": {} }; //load JSON data $http.get('countries.json') .then(function(res) { $scope.data.locations.countries = res.data; $scope.status = "loaded "+$scope.data.locations.countries.length+" countries."; $scope.$apply(); }); } ]; |
nghtml
|
1 2 3 4 5 6 7 8 9 10 |
<div class="dropdown"> <a class="btn btn-default" data-toggle="dropdown" href="#">{{ country }} <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownCountry"> <li ng-repeat="country in data.locations.countries | orderBy:'country'"> <a>{{country.country}}</a> </li> </ul> </div> |
You are mixing bootstrap and ui.bootstrap
This is not good, mixing bootstrap, jquery and ui.bootstrap.