angularjs "ng-view" in asp.net mvc application - routing

i'm working at the moment on a web application, that uses asp.net with mvc and angularjs. The problem is, to get angularjs with an "ng-view" in a cshtml site. I didn't worked with angularjs and mvc before, so I hope you can help me :-)

Thats my problem:

• Angularjs works with the litle test {{1+2}},
• but it didn't displays me the routing from other cshtml sites.

Profile.cshtml

{{1+2}}
<div ng-view></div>

For further questions: there is no body oder html tag, because i defined it in the _layout.cshtml. In this site I also integrated the script of angularjs across BundleConfig.cs. Angularjs still works on Profile.cshmtl with the {{1+2}} test.

The Profile.cshtml should show the _PProfiles.cshtml site with the following code:

<input type="text" ng-model="profileFilter" placeholder="Suchen..." />
    <table>
        <thead>
            <tr>
                <th colspan="4">Employee Table</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="employee in employeeList | filter: searchFilter">
                <td><a href="#/_PProfiles/{{employee.Identifier}}">{{employee.firstName}} {{employee.lastName}}</a></td>
                <td>{{employee.emailAdress}}</td>
                <td>{{employee.Org1}}</td>
                <td>{{employee.Org2}}</td>
                <td>{{employee.Org3}}</td>
            </tr>
        </tbody>
    </table>

And the app.js (angularjs script) should route this: (there is also a further webpage, with should displayed, when I typed something in the input tag --> searchFilter)

(function () {
    'use strict';

    angular.module('Headcount', [
    'Headcount.controller',
    'Headcount.service',
    'ngRoute'
    ]).

    config(['$routeProvider', function ($routeProvider) {

        $routeProvider.

          when("/_PProfiles", {
              templateUrl: "/Home/_PProfiles.cshtml",
              controller: "tableController"
          }).
          when("/_PProfiles/:id", {
              templateUrl: "/Home/_PEmployees.cshtml", 
              controller: "employeeController"
          }).
          otherwise({ redirectTo: '/Profiles' });
    }]);

})();

The Profile.cshtml site is implemented in the Home:Controller and is displayed when I run the application. The other site _PProfile.cshtml is not implemented.

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace myApplikation.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Profile()
        {
            ViewBag.Message = "Your profile page.";
            return View();
        }

        public ActionResult Departments()
        {
            ViewBag.Message = "Your departments page.";

            return View();
        }

    }
}

This all works in a normal asp.net application without mvc. I think the problem can be in the mvc routing, because it doesnt allows angularjs to route.

EDIT: That problem is solved (it depends on false integration with the mvc view), but ng-view still doesn't displays anything. Note: I'm working with angular 1.5.9. With the higher versions, the ng-view doesn't work without the mvc controller.

So are there any suggestions to solve this problem?

Edit 09.07.18 Here you can see the output in the browser console.

Image_ng-view&ng-controller

ng-view is commented and displays nothing. The element above displays a message with

$scope.Message = "Test if it works"

This was a test, if the controller works.

And when I scope the {{employeeList}} from the "tableController" it also works. But not the ng-view! Image_ng-controller