title: angular js load a file and place content in a div
body: <p>I have this page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;body ng-app='vb'&gt;
          &lt;div id="loadedContent" ng-controller="ExampleController"&gt;&lt;/div&gt;
  
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              var app = angular.module('vb', ['ngRoute']);
              angular.module('vb', []).controller('ExampleController', ['$scope', function($scope) {}]);    
  
              jQuery(function () {
                  jQuery.get('vb.txt', {
                      now: jQuery.now()
                  }, function (data) {
                      $("#loadedContent").append(data);
                  });
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/YU471B3lyHkwMzYKvQso?p=preview" rel="nofollow">Plunker</a></p>
  
  <p>What the page does is to load a text file which contains: <code>{{10*10}}</code> and places it in the <code>loadedContent</code> div tag but the Angular JS code is not compiled. I am very new to Angular JS. I have read on the documentation and tried out <code>ng-bind, ng-include, compile</code> directive but none seems to work. What is the way to go about this?</p>