title: dropdown in navigation bar does not expand (bootstrap, angular, directives, routes)
body: <p>For some strange reason the bootstrap menu dropdown is not expanded on click when it is constructed through router template. Being used directly in the template it works fine.</p>
  
  <p>Here is the plunker to play with: <a href="http://plnkr.co/edit/GOky2ajHl46VddQRKDye?p=preview" rel="noreferrer">http://plnkr.co/edit/GOky2ajHl46VddQRKDye?p=preview</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="app"&gt;
      &lt;head&gt;
          &lt;title&gt;TEST&lt;/title&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css"&gt;
          &lt;script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
  var app = angular.module('app', [ 'ngRoute', 'ctrls' ]);
  
  app.config(function ($routeProvider) {
      $routeProvider.when('/menu', {
          template : '&lt;menu&gt;&lt;/menu&gt;',
          controller : 'mainCtrl'
      }).otherwise({ redirectTo: '/menu' });
  });
  
  app.directive('menu', function () {
      return {
          restrict : 'E',
          template : '&lt;nav class="navbar navbar-default" role="navigation"&gt;' +
            '&lt;ul class="nav navbar-nav"&gt;' +
            '  &lt;li class="dropdown"&gt;' +
            '    &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;' +
            '    &lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;' +
            '  &lt;/li&gt;' +
            '&lt;/ul&gt;' +
            '&lt;/div&gt;' +
            '&lt;/nav&gt;'
      };
  });
  
  angular.module('ctrls', [ ]).controller('mainCtrl', function () { });
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;!-- this menu does not work --&gt;
      &lt;body ng-view&gt;&lt;/body&gt;
  
      &lt;!-- this menu works fine: --&gt;
      &lt;!-- &lt;body&gt;&lt;menu&gt;&lt;/menu&gt;&lt;/body&gt; --&gt;
  &lt;/html&gt;
  </code></pre>