Angular bootstrapping after load of html

Question

I first initialize my app with ng-app=\"myApp\" in the body tag and this works fine for all angularized-html that is loaded on first page load.

Later on I have some

Answer 1

Your approach doesn't seem right. You are usinging jQuery and Angular together in an inappropriate way that is likely to have conflicts.

Angular's built in template support is the best way to do this either using ng-include or you can use Angular's routing and along with ng-view. The documentation is here:

http://docs.angularjs.org/api/ng.directive:ngInclude

http://docs.angularjs.org/api/ngRoute.directive:ngView

The simplest possible thing would be to just set the ng-include to the url string:

If you actually need it to load dynamically when you do something then this is a more complete solution for you:

http://plnkr.co/edit/a9DVEQArS4yzirEQAK8c?p=preview

HTML:

    
{{ started }}
 
    Load
    

Javascript:

var myApp = angular.module('myApp', [])
.controller('InitCtrl', function($scope) 
{
    $scope.started = 'App is started';
    $scope.loadTemplate = function() {
      console.log('loading');
      $scope.template = "ajax.html";
    }
}).controller('AfterCtrl', function($scope) 
{
    $scope.loaded = 'Is now loaded';
});