How to bind an AngularJS controller to dynamically added HTML?

Question

For this scenario, I have a page of HTML with some AngularJS directives, controllers, etc.

Something like this:

Answer 1

Lets take a small template

 var  template = '
';
      template += ''; 
      template += '
';

Now if you want to add this template you have to do the following two things:

1) Instantiate your controller by $controller

2) Compile your template.

//this creates a new scope
var $scope = $rootScope.$new();  
//Controller initialize with $scope
$controller('someController',{$scope,$scope});   
var templateEl = angular.element(template);
//Now compile the template with scope $scope
$compile(templateEl)($scope);
angular.element('body').append(templateEL);