AngularJS - Directive - "ng-include"

The ng-include directive allows you to embed an HTML page into another HTML page. This is useful when you want to reuse a specific view in the multiple pages in your application. The ng-include directive can either be the name of the HTML page you want to reuse or a property on the $scope object that point to the reusable HTML page.

Define controller:

var myApp = angular.module('myApp', [])

                                         .controller('myController', function($scope){

                                                var employees = [
                                                       { name: Pratibha Hyanki,  gender: Female,  city: India},
                                                       { firstName: Akira,  gender: Female, city: Mumbai},
                                                       { firstName: Dan,  gender: Male, city: Delhi}
                                                ];    

                                                 $scope.employees = employees;

                                                 //in case you want to save the employee view in the scope object.

                                                 $.scope.employeeView = "employee.html"; 

                                          });

                                                

Using this controller: emplyee.html

     <div ng-controller='myController'>

              <div>
                       <table>
                             <tr ng-repeat ='employee in employees'>
                                    <td> {{employee.name}}  </td>
                                    <td> {{employee.gender}} </td>
                                    <td>{{employee.city}} </td>
                       </table>

              </div>    

    </div>

Using emplyee.html inside home.html

     <div ng-include =  "'employee.html'">  

                                or

     <div ng-include =  "employeeView">