AngularJS - Includes

HTML does not support embedding HTML pages within the HTML page. To achieve this functionality, we can use one of the following options −

  • Using Ajax − Make a server call to get the corresponding HTML page and set it in the innerHTML of HTML control.

  • Using Server Side Includes − JSP, PHP and other web side server technologies can include HTML pages within a dynamic page.

Using AngularJS, we can embed HTML pages within an HTML page using ng-include directive.

<div ng-app = "" ng-controller = "studentController">
   <div ng-include = "'main.htm'"></div>
   <div ng-include = "'subjects.htm'"></div>



      <title>Angular JS Includes</title>
      <script src = "">
         table, th , td {
            border: 1px solid grey;
            border-collapse: collapse;
            padding: 5px;
         table tr:nth-child(odd) {
            background-color: #f2f2f2;
         table tr:nth-child(even) {
            background-color: #ffffff;
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "mainApp" ng-controller = "studentController">
         <div ng-include = "'/angularjs/src/include/main.htm'"></div>
         <div ng-include = "'/angularjs/src/include/subjects.htm'"></div>
         var mainApp = angular.module("mainApp", []);
         mainApp.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",
               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;


<table border = "0">
      <td>Enter first name:</td>
      <td><input type = "text" ng-model = "student.firstName"></td>
      <td>Enter last name: </td>
      <td><input type = "text" ng-model = "student.lastName"></td>
      <td>Name: </td>


   <tr ng-repeat = "subject in student.subjects">
      <td>{{ }}</td>
      <td>{{ subject.marks }}</td>


To execute this example, you need to deploy testAngularJS.htm, main.htm, and subjects.htm to a web server. Open the file testAngularJS.htm using the URL of your server in a web browser and see the result.