Cannot use angular to call web api in cshtml - angularjs

Question

I have to add an AngularJs control to my cshtml file in a project but as I couldn't make it work I tried to create a simple test application, and now it seems that even this simple app (including only an app module and a controller) is not working!
app.js
(function() {
angular.module('testApp', []);
});
GetProductsCtrl.js
angular.module('testApp.controllers', []); //this is supposed to go in a separate file
angular.module('testApp.controllers')
.controller("GetProductsCtrl", function ($scope, $http) {
$scope.greetings = "hi";
$http({
method: 'GET',
url: "http://localhost:54327/api/products"
})
.success(function (data) {
$scope.products = data;
});
});
ProductsController.cs
public class ProductsController : ApiController
{//inside the web api project and running on http://localhost:54327/
Product[] products = new Product[]
{
new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
};
public IEnumerable<Product> GetAllProducts()
{
return products;
}
public IHttpActionResult GetProduct(int id)
{
var product = products.FirstOrDefault(p => p.Id == id);
if (product == null)
return NotFound();
return Ok(product);
}
}
usage
<script src="~/Scripts/angular/common/GetProductsCtrl.js"></script>
<div class="row" ng-app="testApp">
<div>
Here I want to add the control.
{{1+1}} #*even this is not evaluated by angular!(it was working)*#
<ul ng-controller="GetProductsCtrl">
<li ng-repeat="product in products">
{{product.Name}} : $ {{product.Price}}
</li>
</ul>
</div>
</div>
and finally bundle:
bundles.Add(new ScriptBundle("~/bundles/angular").Include(
"~/Scripts/angular.min.js",
"~/Scripts/angular/app.js"
));

Answer 1

What I can guess is that Bundle will try rename your $http provider.
So try .controller("GetProductsCtrl", ["$scope", "$http", function ($scope, $http){
}] instead.