La incrustación de una página html dentro de html no es compatible con HTML, es por eso que usamos las directivas de inclusión de AngularJS. Al usar la directiva ng-controller, podemos hacer la tarea fácilmente.
Sintaxis:
<element ng-include=" ">content...<element>
Ejemplo:
<!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <title>ng-include directives</title> </head> <body ng-app=""> <center> <h1 style="color:green;">GeeksforGeeks</h1> <div ng-include="'geeks.html'"></div> </center> </body> </html>
Salida: 
Incluyendo código AngularJS: Similar al caso anterior, incluye el archivo html usando ng-include de manera similar, puede contener código AngularJS.
Ejemplo:
Tabla GeeksforGeeks.html:
<table>
<tr ng-repeat="x in courses">
<td>{{ x.Course }}</td>
<td>{{ x.Duration }}</td>
</tr>
</table>
Código:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body>
<div ng-app="geeks" ng-controller="customersCtrl">
<div ng-include="'Geekstable.html'"></div>
</div>
<script>
var app = angular.module('geeks', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.php").then(function (response) {
$scope.courses = response.data.records;
});
});
</script>
</body>
</html>
Producción:
Incluir dominios cruzados: si desea incluir archivos de otro dominio, puede agregar una lista blanca de archivos o dominios legales en la función de configuración de su aplicación.
Código de muestra:
<!DOCTYPE html>
<html>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
<body ng-app="myApp">
<div ng-include="'filel_path_from_anotherDomain'"></div>
<script>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['filel_path_from_anotherDomain']);
});
</script>
</body>
</html>