Angular.js routing for views in ASP.net MVC app not working

Question

I'm new to web development and I'm currently trying to separate my UI by keeping my UI in Angular.js using views and routing and controllers and services. Whereas, I'm using a Web API to fetch the data from the database.

I'm trying to figure out how to get the views to work using Angular.js instead of using Asp.net's razor MVC. It works fine if I use the default routing from the ASP.net MVC web app and api but won't work if I use Angular.js routing.

1. I've separated my Views in a folder and created the views I want
2. I have set up a module with the routing for the separate views as well as the controller associated with them.
3. I have included the app as ng-app directive in the html file.

Index.cshtml:

<div ng-app="myApp">
    <div ng-controller="StudentCtrl">

            <tbody>
                <tr ng-repeat="dataModel in students">
                    <td style="display:none">{{dataModel.StudentID}}</td>
                    <td> {{dataModel.FirstName}}</td>
                    <td> {{dataModel.LastName}}</td>
                    <td>{{dataModel.Email}}</td>
                    <td>{{dataModel.Address}}</td>
                    <td style="text-align:right; color:white">
                        <span>
                            <span id="save" class="btn btn-primary margin-right-btn"
                                  ng-click="GetStudentByID(dataModel)">
                                Edit
                            </span>
                        </span>
                    </td>
                    <td style="text-align:right; color:white">
                        <span>
                            <span id="save" class="btn btn-danger margin-right-btn"
                                  ng-click="DeleteStudent(dataModel)">
                                Delete
                            </span>
                        </span>
                    </td>
                </tr>
            </tbody>
            <tfoot></tfoot>
        </table>


    </div>
</div>

<script src="~/Scripts/angular.min.js"></script>
<script src="~/ScriptsNg/Module/sepView.js"></script>
<script src="~/ScriptsNg/Controller/StudentCtrl.js"></script>
<script src="~/ScriptsNg/Service/CrudService.js"></script>

Controller in Angular.js: (StudentCtrl.js):

sepView.controller('StudentCtrl', ['$scope', 'CrudService',
    function ($scope, CrudService) {

        // Base Url 
        var baseUrl = '/api/StudentAPI/';
        $scope.btnText = "Save";
        $scope.studentID = 0;
        $scope.SaveUpdate = function () {
            var student = {
                FirstName: $scope.firstName,
                LastName: $scope.lasttName,
                Email: $scope.email,
                Address: $scope.address,
                StudentID: $scope.studentID
            }
            if ($scope.btnText == "Save") {
                var apiRoute = baseUrl + 'SaveStudent/';
                var saveStudent = CrudService.post(apiRoute, student);
                //Callback to check what kind of response we received:

                saveStudent.then(function (response) {
                    if (response.data != "") {
                        alert("Data Saved Successfully");
                        $scope.GetStudents();
                        $scope.Clear();

                    } else {
                        alert("Some error");
                    }

                }, function (error) {
                    console.log("Error: " + error);
                });
            }
            else {
                var apiRoute = baseUrl + 'UpdateStudent/';
                var UpdateStudent = CrudService.put(apiRoute, student);
                UpdateStudent.then(function (response) {
                    if (response.data != "") {
                        alert("Data Updated Successfully");
                        $scope.GetStudents();
                        $scope.Clear();

                    } else {
                        alert("Some error");
                    }

                }, function (error) {
                    console.log("Error: " + error);
                });
            }
        }

app module (sepView.js):

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

sepView.config(function
    ($routeProvider) {
    $routeProvider
        .when('/', {
            controller:
                'StudentCtrl',
            templateUrl:
                'Views/Student/Index.html'
        })
        .otherwise({
            redirectTo: '/'
        });
});

Service to retrieve data from Api:

sepView.service('CrudService', function ($http) {

    var urlGet = '';
    this.post = function (apiRoute, Model) {
        var request = $http({
            method: "post",
            url: apiRoute,
            data: Model
        });
        return request;
    }
    this.put = function (apiRoute, Model) {
        var request = $http({
            method: "put",
            url: apiRoute,
            data: Model
        });
        return request;
    }

This is what the MVC generated controller looks like:

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

namespace CRUDOperations.Controllers
{
    public class StudentController : Controller
    {
        // GET: Student
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult viewAllStudents() {
            return View();
        }
    }
}

This is what is happening:

https://i.sstatic.net/43a17.jpg

As you can see, angular can't access what it needs to populate the view. It was working fine when I was using Razor pages and MVC default routing.