title: Dynamically generated drop-down menu is not working
body: <p>I need to get a complex dropdown menu from backend and show it in angular application. Everything is working fine except one thing: dynamically generated dropdown menu is not working.</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="BlogApp"&gt;
  &lt;head&gt;
      &lt;title&gt;Blog&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-sanitize.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="test.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="tagsCtrl" &gt;
  
  &lt;nav class="navbar navbar-default" role="navigation"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a id="a-blog-path" target="_self" class="navbar-brand" href="#"&gt;Blog&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;div class="collapse navbar-collapse" ng-class="!navCollapsed &amp;&amp; 'in'" ng-click="navCollapsed=true"&gt;
          &lt;ul class="nav navbar-nav" ng-bind-html="topLeft"&gt;
          &lt;/ul&gt;
  
          &lt;ul class="nav navbar-nav navbar-right"&gt;
  
              &lt;li dropdown&gt;
                  &lt;a class="dropdown-toggle" href="#"&gt; test &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;finger&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
  
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>test.js</p>
  
  <pre><code>angular.module('BlogApp', ['ui.bootstrap', 'ngSanitize'],
    function($locationProvider){
      $locationProvider.html5Mode(true);
    })
    .controller('tagsCtrl', ['$scope', '$location', '$http', '$sce',
      function ($scope, $location, $http, $sce) {
  
        $scope.topLeft  = '&lt;li&gt;&lt;a class="dropdown-toggle" href="#"&gt; test &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;&lt;ul class="dropdown-menu"&gt;&lt;li&gt;&lt;a href="#"&gt;finger&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;';
  
      }]);
  </code></pre>
  
  <p>I have the code in <a href="http://plnkr.co/edit/ju1YazIFCZroLWOR7qqT?p=preview" rel="nofollow noreferrer">plunker</a></p>
  
  <p>In this example topLeft menu dropdown doesn't work, but topRight menu is working fine.</p>
  
  <p>How I can resolve this issue?</p>
  
  <p>Thanks!</p>
  
  <p><strong>UPD:</strong> Solved. <a href="http://plnkr.co/edit/LXSeHsmxYYum5KgsQdkG?p=preview" rel="nofollow noreferrer">Plunker working demo</a></p>