bootstrap navbar menu dropdown not working - angularjs

Question

I have a MEAN app generated by yeoman angular-fullstack that I have been trying to modify. I want to add a tab to the navigation bar, which upon clicking, will show additional items in a drop down.
Something like this:
http://getbootstrap.com/examples/navbar/
Here is my navbar.html file:
<div class="navbar navbar-default navbar-fixed-top" ng-controller="NavbarController">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<b>Cassmon</b>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li ng-repeat="item in nav.menu" ng-class="{active: nav.isActive(item.link)}">
<a ng-href="{{item.link}}">{{item.title}}</a>
</li>
<li class="dropdown">
Metric Browser<span class="caret"></span>
<ul class="dropdown-menu" collapse="nav.isCollapsed()">
<li>Latency </li>
<li>Performance </li>
<li>Execution </li>
<li>All </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
And here is my navbar.controller.ts file:
'use strict';
class NavbarController {
//start-non-standard
menu = [{
'title': 'Home',
'link': '/'
},{
'title': 'Dropdown',
'link' : '/dropdown'
}];
$location;
Auth;
isAdmin;
getCurrentUser;
isLoggedIn;
isCollapsed = false;
//end-non-standard
constructor($location, Auth) {
this.$location = $location;
this.isLoggedIn = Auth.isLoggedIn;
this.isAdmin = Auth.isAdmin;
this.getCurrentUser = Auth.getCurrentUser;
}
isActive(route) {
return route === this.$location.path();
}
isCollapsed() {
return this.isCollapsed;
}
toggleCollpase() {
if (this.isCollapsed) {
this.isCollapsed = false;
} else {
this.isCollapsed = true;
}
}
}
angular.module('cassmonApp')
.controller('NavbarController', NavbarController);
When I build the app, I get this page but when I click the drowdown button I don't see the menu coming up. Any help would be appreciated.
Here are my package files:
bower.json
{
"name": "XXXXXXXX",
"version": "0.0.0",
"dependencies": {
"angular": "~1.5.0",
"json3": "~3.3.1",
"es5-shim": "~3.0.1",
"bootstrap": "~3.1.1",
"bootstrap-social": "~4.9.1",
"angular-resource": "~1.5.0",
"angular-cookies": "~1.5.0",
"angular-sanitize": "~1.5.0",
"angular-route": "~1.5.0",
"angular-bootstrap": "~1.1.2",
"font-awesome": ">=4.1.0",
"lodash": "~2.4.1",
"angular-socket-io": "~0.7.0",
"angular-validation-match": "~1.5.2",
"bootstrap-side-navbar": "^1.0.1",
"angular-datatables": "^0.5.4",
"angular-daterangepicker": "^0.2.2",
"angular-material": "^1.1.0",
"angular-messages": "^1.5.8",
"angular-chart.js": "^1.0.3"
},
"devDependencies": {
"angular-mocks": "~1.5.0"
}
}
package.json
{
"name": "XXXXXXXX",
"version": "0.0.0",
"main": "server/app.js",
"dependencies": {
"babel-polyfill": "^6.7.2",
"babel-runtime": "^6.6.1",
"bluebird": "^3.3.3",
"body-parser": "^1.13.3",
"composable-middleware": "^0.3.0",
"compression": "^1.5.2",
"connect-mongo": "^1.2.1",
"cookie-parser": "^1.3.5",
"dateformat": "^1.0.12",
"ejs": "^2.3.3",
"errorhandler": "^1.4.2",
"express": "^4.13.3",
"express-jwt": "^3.0.0",
"express-session": "^1.11.3",
"jsonwebtoken": "^7.0.0",
"lodash": "^4.6.1",
"lusca": "^1.3.0",
"method-override": "^2.3.5",
"mongoose": "^4.1.2",
"morgan": "~1.7.0",
"passport": "~0.3.0",
"passport-google-oauth20": "^1.0.0",
"passport-local": "^1.0.0",
"serve-favicon": "^2.3.0",
"socket.io": "^1.3.5",
"socket.io-client": "^1.3.5",
"socketio-jwt": "^4.2.0",
"uuid": "^3.0.0"
},
"devDependencies": {
"autoprefixer": "^6.0.0",
"babel-core": "^6.6.5",
"babel-register": "^6.6.5",
"babel-plugin-transform-class-properties": "^6.6.0",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-preset-es2015": "^6.6.0",
"del": "^2.0.2",
"gulp": "^3.9.1",
"gulp-add-src": "^0.2.0",
"gulp-angular-templatecache": "^1.7.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-babel": "^6.1.2",
"gulp-typescript": "~2.13.0",
"gulp-typings": "^1.3.6",
"gulp-tslint": "^5.0.0",
"gulp-cache": "^0.4.2",
"gulp-concat": "^2.6.0",
"gulp-env": "^0.4.0",
"gulp-filter": "^4.0.0",
"gulp-imagemin": "^2.2.1",
"gulp-inject": "^4.0.0",
"gulp-istanbul": "~0.10.3",
"gulp-istanbul-enforcer": "^1.0.3",
"gulp-jscs": "^3.0.2",
"gulp-jshint": "^2.0.0",
"jshint": "2.9.2",
"gulp-livereload": "^3.8.0",
"gulp-load-plugins": "^1.0.0-rc.1",
"gulp-clean-css": "^2.0.6",
"gulp-mocha": "^2.1.3",
"gulp-ng-annotate": "^2.0.0",
"gulp-ng-constant": "^1.1.0",
"gulp-node-inspector": "^0.1.0",
"gulp-plumber": "^1.0.1",
"gulp-protractor": "^2.1.0",
"gulp-rename": "^1.2.2",
"gulp-rev": "^7.0.0",
"gulp-rev-replace": "^0.4.2",
"gulp-sort": "^2.0.0",
"gulp-sourcemaps": "^1.5.2",
"gulp-svgmin": "^1.1.2",
"gulp-uglify": "^1.2.0",
"gulp-useref": "^3.0.3",
"gulp-util": "^3.0.5",
"gulp-watch": "^4.3.5",
"grunt": "^1.0.1",
"grunt-build-control": "^0.7.0",
"isparta": "^4.0.0",
"utile": "~0.3.0",
"nodemon": "^1.3.7",
"run-sequence": "^1.1.0",
"lazypipe": "^1.0.1",
"wiredep": "^2.2.2",
"open": "~0.0.4",
"jshint-stylish": "^2.2.0",
"connect-livereload": "^0.5.3",
"istanbul": "~0.4.1",
"chai": "^3.2.0",
"sinon": "^1.16.1",
"chai-as-promised": "^5.1.0",
"chai-things": "^0.2.0",
"karma": "~0.13.3",
"karma-firefox-launcher": "^1.0.0",
"karma-script-launcher": "^1.0.0",
"karma-chrome-launcher": "^1.0.1",
"karma-jade-preprocessor": "0.0.11",
"karma-phantomjs-launcher": "~1.0.0",
"karma-ng-html2js-preprocessor": "^1.0.0",
"karma-spec-reporter": "~0.0.20",
"sinon-chai": "^2.8.0",
"mocha": "^2.2.5",
"karma-mocha": "^1.0.1",
"karma-chai-plugins": "~0.7.0",
"phantomjs-prebuilt": "^2.1.4",
"proxyquire": "^1.0.1",
"supertest": "^1.1.0",
"tslint": "^3.5.0",
"typings": "^0.8.1"
},
"engines": {
"node": "^4.4.0",
"npm": "^2.14.20"
},
"scripts": {
"test": "gulp test",
"postinstall": "./node_modules/.bin/typings install",
"update-webdriver": "node node_modules/protractor/bin/webdriver-manager update",
"start": "node server"
},
"private": true
}

Answer 1

please make sure that you have linked bootstrap.js and jquery.js files and sometime there is issue with jquery version.

Answer 2

Angular and bootstrap fight each other due to bootstraps dependency on jQuery. Right now angular-bootstrap is trying to reconcile the two using ui bootstrap.
<div ng-controller="DropdownCtrl">
<!-- Simple dropdown -->
<span uib-dropdown on-toggle="toggled(open)">
<a href id="simple-dropdown" uib-dropdown-toggle>
Click me for a dropdown, yo!
</a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
<li ng-repeat="choice in items">
<a href>{{choice}}</a>
</li>
</ul>
</span>
</div>
Is from http://angular-ui.github.io/bootstrap/ This is where I would look for solutions.

Answer 3

If you are using angular cli you can:
first: npm install bootstrap#next
//install jquery, etc, too.
Then put this in your file angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js"
],