AngularJS $http service not able to call asp.net mvc action

I am learning angularjs. i am using VS2013 and asp.net MVC 5. 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

publicclass 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" };returnnew JsonResult { Data = Courses, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }
    }

This is my routing script of angularjs 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: {}'

please guide me what to change in code with url rewrite code to get rid of this error. mention issue is action is not getting called. please tell me how to call action. Thanks


AngularJS $http service not able to call asp.net mvc action