title: Inner html add by ng-bind-html in angularjs
body: <p>I am generating bootstrap navigation menu by using angular directive. All of the things were Ok but when I reached finally to generate dropdown menu then I need to generate HTML dynamically. To generate HTML I have used angular ng-bind-html. The angular ng-bind-html is creating HTML very well. The ng-bind-html generating HTML looks like this.</p>
  
  <pre><code>&lt;div ng-bind="getDropdownMenu(submenu)"&gt;
    &lt;ul class="dropdown-menu" role="menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
        &lt;li class="divider"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
        &lt;li class="divider"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I need only HTML looks like below no need this div ''.</p>
  
  <pre><code>&lt;ul class="dropdown-menu" role="menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
      &lt;li class="divider"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
      &lt;li class="divider"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>To generate HTML I have used method looks like this.</p>
  
  <pre><code>$scope.getDropdownMenu = function (menu) {
    try {                
        var dropdownMenu = '&lt;ul class="dropdown-menu" role="menu"&gt;' +
        '&lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;' +
        '&lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;' +
        '&lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;' +
        '&lt;li class="divider"&gt;&lt;/li&gt;' +
        '&lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;' +
        '&lt;li class="divider"&gt;&lt;/li&gt;' +
        '&lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;' +
         '&lt;/ul&gt;';
          var trustedHtml = $sce.trustAsHtml(dropdownMenu);
              return trustedHtml;
          } catch (e) {
              throw e;
          }
      };
  </code></pre>
  
  <p>The full of bootstrap menu code is </p>
  
  <pre><code>&lt;ul class="nav navbar-nav"&gt;
      &lt;li class="active"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li class="dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;div ng-bind-html="getDropdownMenu(submenu)"&gt;&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>So how can i remove That dive which is no need to me. Is there any way Thanks.</p>