title: Angular UI tree content does not appear properly
body: <p>Am new to angular framework. I implemented angular UI tree and it works fine but i have an alignment issue. consider the following code.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /&gt;
      &lt;link href="angular-ui-tree-master/examples/css/app.css" rel="stylesheet" /&gt;
      &lt;link href="angular-ui-tree-master/dist/angular-ui-tree.min.css" rel="stylesheet" /&gt;
      &lt;script src="jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="bootstrap/js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="angular-ui-tree-master/dist/angular-ui-tree.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ng-app="myApp" ng-controller="MyCtrl"&gt;
          &lt;script type="text/ng-template" id="nodes_renderer.html"&gt;
            &lt;div ui-tree-handle&gt;
                   &lt;span class="col-md-12"&gt;{{node.title}}&lt;/span&gt;
            &lt;/div&gt;
            &lt;ol ui-tree-nodes="" ng-model="node.childlink"&gt;
              &lt;li ng-repeat="node in node.childlink"  ui-tree-node ng-include="'nodes_renderer.html'"&gt;
              &lt;/li&gt;
            &lt;/ol&gt;
          &lt;/script&gt;
          &lt;div ui-tree="treeOptions" class="dd"&gt;
              &lt;ol ui-tree-nodes="" ng-model="data" id="tree-root"&gt;
                  &lt;li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'" data-drag-delay="100"&gt;&lt;/li&gt;
              &lt;/ol&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
          var myApp = angular.module('myApp', ['ui.tree']);
          myApp.controller('MyCtrl', function ($scope) {
              $scope.toggle = function (scope) {
                  console.log('menu collapse');
                  scope.toggle();
              };
              $scope.data = [
             {
                 "id": "1",
                 "title": "node1",
                 "childlink": [
                     {
                         "id": "2",
                         "title": "node 1.1",
                         "childlink": [
                               {
                                   "id": "3",
                                   "title": "node 1.1.1",
                                   "childlink": []
                               },
                                {
                                    "id": "4",
                                    "title": "node 1.1.2",
                                    "childlink": []
                                }
                         ]
                     },
                      {
                          "id": "5",
                          "title": "node 1.2",
                          "childlink": []
                      }
                 ]
             }
              ];
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I tired <strong>without bootstrap</strong>(class="col-md-12") it works fine and content aligned properly but i need to works along <strong>with bootstrap</strong>(class="col-md-12") <strong>content does not aligned</strong>
      {{node.title}}</p>
  
  <p>In my project bootstrap get implemented in many places so am not able to override class col-md-12. </p>
  
  <p><img src="https://i.stack.imgur.com/XCVDo.jpg" alt="enter image description here"></p>