I use ajax to dynamically load part of page in a Sails project views/homepage.ejs. 
The controller is "food", "show" is one action of "food", so I have a file /views/food/show.ejs. So by using Ajax load food/show, will load show.ejs.

```
$('#outerDiv').load("food/show",function(responseTxt,status,xhr){
  if(status!=="error"){
     alert("BOOT...");
     //bootstrap angular
     angular.bootstrap($("#outerDiv"));
  }
});

```

The content of show.ejs is like this:

```
<script>
  alert("LOAD..");
  var app = angular.module("myApp",[]);
  app.controller("myCtrl",function (){
    this.numInStock= 10;
  })
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<p>The number in stock is: {{numInStock}}</p>
</div>

```

But the angular in that loaded page still cannot work, even I try to manually bootstrap angular for the new loaded page. 

Alert(LOAD...) comes first, then Alert(BOOT...) comes next, while I found the new page was already rendered like "The number in stock is: {{numInStock}}". Obviously, it's wrong, I want it to be "The number in stock is: 10". 

Chrome console gives an error:

```
Uncaught Error: [ng:btstrpd] http://errors.angularjs.org/1.2.26/ng/btstrpd?p0=%26lt%3Bdiv%20id%3D%22subPage%22%26gt%3B

```