title: How to render partial views with Angular?
body: <p>I have the following  route config :</p>
  
  <pre><code>var Company;
  (function (Company) {
      var HomeConfig = (function () {
          function HomeConfig($stateProvider, $urlRouterProvider) {
              this.$stateProvider = $stateProvider;
              this.$urlRouterProvider = $urlRouterProvider;
              this.$urlRouterProvider.otherwise('/welcome');
              this.$stateProvider
              .state('welcome', {
                  url: '/welcome',
                  template: function () {
                      return $("#welcome").html();
                  }
              })
                  .state('employee', {
                      url: '/employee',
                      views: {
                          '': {
                              template: function () {
                                  return $("#employee").html();
                              },
                              controller: 'employeeController',
                              controllerAs: 'viewModel'
                          }
  
                      }
                  })
                  .state('success', {
                      url: '/success?firstName&amp;lastName&amp;gender&amp;salary&amp;phoneNumber',
                      template: function () {
                          return $('#success').html();
                      },
                      controller: 'successEmployeeRegisterController',
                      controllerAs: 'viewModel',
                      params: {
                          firstName: { value: "", squash: true },
                          lastName: { value: "", squash: true },
                          gender: { value: "", squash: true },
                          salary: { value: "", squash: true },
                          phoneNumber: { value: "", squash: true }
                      }
                  })
  
                  .state('department', {
                      url: '/department',
                      template: function () {
                          return $("#department").html();
                      },
                      controller: 'departmentController',
                      controllerAs: 'viewModel'
                  });
          }
          HomeConfig.$inject = [
              '$stateProvider',
              '$urlRouterProvider'
          ];
          return HomeConfig;
      })();
      Company.HomeConfig = HomeConfig;
  })(Company || (Company = {}));
  </code></pre>
  
  <p>My ListEmployee partial view looks like this:</p>
  
  <pre><code>&lt;md-content class="overview" flex="100" layout-xs="column" layout-gt-xs="row"&gt;
      &lt;div flex-gt-xs="33" ng-repeat="employee in viewModel.employees track by employee.id"&gt;
          &lt;div layout="row" flex-gt-xs="90"&gt;
              &lt;md-card&gt;
                  &lt;md-card-header&gt;
                      &lt;md-card-header-text layout="column"&gt;
                          &lt;span class="md-title"&gt;
                              {{employee.fullName}}
                          &lt;/span&gt;
                      &lt;/md-card-header-text&gt;
                  &lt;/md-card-header&gt;
                  &lt;img ng-src="~/Images/profile.svg" style="height:130px ; width:180px" class="md-card-image" alt="Washed Out"&gt;
                  &lt;md-card-title&gt;
                      &lt;md-card-title-text&gt;
                          &lt;p&gt;
                              Salary: {{employee.salary}}
                          &lt;/p&gt;
                          &lt;p&gt;
                              Gender:   {{employee.gender}}
                          &lt;/p&gt;
                          &lt;p&gt;
                              Phone Number:   {{employee.phoneNumber}}
                          &lt;/p&gt;
                          &lt;p&gt;
                              Department:   {{employee.department.name}}
                          &lt;/p&gt;
                      &lt;/md-card-title-text&gt;
                  &lt;/md-card-title&gt;
                  &lt;md-card-content&gt;
                  &lt;/md-card-content&gt;
                  &lt;md-card-actions layout="row" layout-align="end center"&gt;
                      &lt;md-button ng-click="viewModel.edit(employee.id)"&gt;Edit&lt;/md-button&gt;
                      &lt;md-button ng-click="viewModel.delete(employee.id)"&gt;Delete&lt;/md-button&gt;
                  &lt;/md-card-actions&gt;
              &lt;/md-card&gt;
              &lt;md-card&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/md-content&gt;
  </code></pre>
  
  <p>How can I render this view in index using angular ?
  Something like that but not with mvc , with angular directives or something</p>
  
  <pre><code>  &lt;script type="text/ng-template" id="employee"&gt;
          @Html.Partial("~/Views/Home/EmployeePartialViews/AddEmployee.cshtml");
          @Html.Partial("~/Views/Home/EmployeePartialViews/ListEmployee.cshtml");
      &lt;/script&gt;
  </code></pre>