AngularJS ASP.Net MVC action: Failed to load resource: the server responded with a status of 404

I am learning angularjs. when user click a link then i am trying to call asp.net mvc action which return json but developer tool showing error called Failed to load resource: the server responded with a status of 404 (Not Found) Home/GetCourses:1

this is my ASP.Net MVC action

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

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

    [Route("Home/GetCourses")]
    public JsonResult GetCourses()
    {
        //ViewBag.Message = "Your contact page.";
        string[] Courses = { "C#", "VB.Net", "SQL", "RDBMS" };
        return new JsonResult { Data = Courses, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

}

This is my routing script and $http call.

var app = angular.module("DemoApp", ["ngRoute"])
                .config(function ($routeProvider, $locationProvider) {
                    $routeProvider
                    .when('/', { // This is for reditect to another route
                        redirectTo: function () {
                            return '/home';
                        }
                    })
                    .when("/home",
                    {
                        templateUrl: "Template/Home.html",
                        controller: "homeController"
                    })
                    .when("/course",
                    {
                        templateUrl: "Template/Course.html",
                        controller: "courseController"
                    })
                    .when("/students",
                    {
                        templateUrl: "Template/Students.html",
                        controller: "studentController"
                    })

                    //$locationProvider.html5Mode(false).hashPrefix('!'); // This is for Hashbang Mode
                    $locationProvider.html5Mode(true)

                })
                .controller("homeController", function($scope)
                {
                    $scope.Message = "Home Page!!";
                    $scope.Title = "Home";
                })
                .controller("courseController", function ($scope, $http) {
                    //$scope.Courses = ["C#", "VB.Net", "SQL", "RDBMS"];
                    $scope.Title = "Courses";
                    alert(GetCoursesUrl);
                    $http.get('/Home/GetCourses')
                        .then(function (response) {
                            alert(response.data);
                            $scope.Courses = JSON.parse(response.data); //response.data; //angular.fromJson(response.data);
                        });
                })
                .controller("studentController", function ($scope) {
                    $scope.Students = ["John", "Sam", "Mac", "Jeff"];
                    $scope.Title = "Students";
                })

I am talking about this $http call

            $http.get('/Home/GetCourses')
                .then(function (response) {
                    alert(response.data);
                    $scope.Courses = JSON.parse(response.data); //response.data; //angular.fromJson(response.data);
                });

but my mvc action is not getting hit because i set break point there.

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

i have this URL rewrite in web.config file mention above. when i commented then error message throwing by chrome dev tool below. Failed to load resource: the server responded with a status of 404 (Not Found) Home/GetCourses:1

when i uncomment rewrite rule in web.config file then error getting different in developer tool.here it is

angular.js:15697 SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at Script.js:42
    at processQueue (angular.js:18075)
    at angular.js:18123
    at Scope.$digest (angular.js:19242)
    at Scope.$apply (angular.js:19630)
    at done (angular.js:13473)
    at completeRequest (angular.js:13730)
    at XMLHttpRequest.requestLoaded (angular.js:13635) 'Possibly unhandled rejection: {}'