Dynamic links in Twitter Bootstrap navbar in angularjs

angularjs, twitter-bootstrap

Solution

Angular will only work inside the ng-view once you start using routing.

I have only this in the containing page:

// links to cdn, js, css
<body>
  <div id="app-container" ng-app="dashboard" ng-view></div>
</body>

All the partials show up inside the div.

All partials include the navigation partial at the very top:

<div ng-include src="'html/navigation.html'"></div>

navigation.html has its own controller:

<div id="nav-bars-container" ng-controller="NavCtrl">
  <a href="#/{{course.id}}">Foo</a>
</div>

& thus has its own scope. Others can be injected:

function NavCtrl($scope, $route, $routeParams) {
  console.log($routeParams);
  $scope.course.id = $routeParams.id;
}

Problem

I've created an angular application that uses Twitter bootstrap. I would like dynamic links in the navbar (like `ng-href="#/{{course.id}}"` They never render - they end up like `href="#/"` If I put the navbar inside the `<div ng-view>` section of the page they do render, although I'd rather not put it there since I don't want to duplicate it on each partial. The basic page is laid out like this: ``` <html ng-app="studentApp"> <head> links to cdns here</head> <body> <div class="container-fluid"> <div class="navbar navbar-inverse navbar-fixed-top">Dynamic bar here</div> <div ng-view>Partials in here</div> </div> </body> </html> ``` For all partials that load in the ng-view portion, the interpolation happens as expected, but not in the navbar. I created a Plunker rather than trying to include everything here. (http://plnkr.co/MK8QEDQUVawkOi92xJXk).

Original source