How to make a GET Request in AngularJS to a RESTful Web API?

Question

I'm making a simple CRUD application to CRUD products. A product has an ID, a Name and a Price. I have built an ASP.NET Web API to store these products and I was trying to call this API in an AngularJS SPA. I have built a module and corresponding component to fetch all products from the API and to render them in a view (listProducts).

I'm not sure how I should be putting the API address in the $http.get() method. My API address is: localhost:58875/api/products. My code:

list-products.module.js

angular.module('listProducts', []);

list-products.component.js

angular.
module('listProducts').
component('listProducts', {
    templateUrl: 'app/products/list-products/list-products.html',
    controller: ['$http',
        function listProductsController($http) {
            var self = this;

            $http.get('http://localhost:58875/api/products').then(function(response) {
                self.products = response.data;
            });
        }
    ]
});

I'm also having trouble in my view, because angular is telling me that it doesn't recognize my controller and I can't figure out why.

list-products.html

<div class="container" ng-controller="listProductsController">
    <h2>Products</h2>
    <hr>    
    <div ng-repeat="p in products">
        <li>{{p.ID}}</li>
        <li>{{p.Name}}</li>
        <li>{{p.Price}}</li>
    </div>     
</div>