Angular CORS

var restaurants = angular.module('Restaurants', ['ngResource']);

restaurants.controller('RestaurantCtrl', function ($scope, RestaurantApi) {
    $scope.restaurants = RestaurantApi.query();
});

restaurants.factory('RestaurantApi', function ($resource) {
    return $resource('http://localhost/Api/Restaurants');
});


// Html5Rocks tutorial
function makeCorsRequest() {
    // All HTML5 Rocks properties support CORS.
    var url = 'http://localhost/Api/Restaurants';

    var xhr = createCORSRequest('GET', url);
    if (!xhr) {
        alert('CORS not supported');
        return;
    }

    // Response handlers.
    xhr.onload = function () {
        alert('Response from CORS request to ' + url + ': ' + xhr.response);
    };

    xhr.onerror = function () {
        alert('Woops, there was an error making the request.');
    };

    xhr.send();
}
function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        // XHR for Chrome/Firefox/Opera/Safari.
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined") {
        // XDomainRequest for IE.
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        // CORS not supported.
        xhr = null;
    }
    return xhr;
}

<!DOCTYPE html>
<html ng-app="Restaurants">
<head>
    <title>Restaurants</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-resource.min.js"></script>
        
    <script src="Restaurant.js"></script>
</head>
<body>
    <div ng-controller="RestaurantCtrl">

        <div ng-repeat="restaurant in restaurants" class="tile">
            <h3>{{restaurant.Name}}</h3>           
        </div>

        <a onclick="makeCorsRequest()">sample CORS request</a>
    </div>
</body>
</html>