Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

AngularJS | ng-include Directive

  • Last Updated : 25 Jun, 2019

AngularJS has a built-in directive to include the functionality from other AngularJS files by using the ng-include directive.The primary purpose of the “ng-include directive” is used to fetch, compile and include an external HTML file in the main AngularJS application.These are added as child nodes in the main application. The ng-include attribute’s value can also be an expression, that returns a filename. All HTML element supports this.


<element ng-include="filename" onload="expression" autoscroll="expression" >

Note: Here the onload and autoscroll parameter are optional , onload define an expression to evaluate when the included file is loaded and autoscroll define whether or not the included section should be able to scroll into a specific view.


  • External HTML file: Save this file as child.html.

    <!-- child.html -->
    <p>Hello Geeks from include component.</hp>
    <!--I am a partial, i don't require head and body tags.-->
  • Code:

    <!DOCTYPE html> 
        <title>AngularJS | ng-include Directive</title
        <script src
    <body ng-app="" style="text-align: center"
         <h1 style="color:green">GeeksforGeeks</h1
         <h3>ng-include Directive</h3>                             
         <div ng-include="'child.html'"></div>
  • Output:
    Example 2:

  • External HTML file: Save this file as table.html.

    <!-- table.html -->
      <tr ng-repeat="Subject in tutorials">
        <td>{{ Subject.Name }}</td>
        <td>{{ Subject.Description }}</td>
  • Code:

    <!DOCTYPE html>
    <html lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>AngularJS | ng-include Directive</title>
        <script src=
    <body ng-app="main-app">
            <h1 style="color: green;">GeeksforGeeks</h1>
             <h3>ng-include Directive</h3>
            <div ng-controller="AngularController">
                <div ng-include="'table.html'"></div>
        var main_app = angular.module('main-app', []);
        main_app.controller('AngularController', function($scope) {
        $scope.tutorials =[
                {Name: "AngularJS", Description : "Front End Framework"},
                {Name: "NodeJS", Description : "Server side JavaScript"},
                {Name: "ExpressJS", Description : "Server side JS Framework"}
  • Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!