Trouble retrieving data from REST endpoint using Angular -- URL keeps showing static/ - angularjs

Question

I'm currently having an issue that has been driving me crazy for the past 30-40 mins. I've successfully created a products api using Django/Django REST framework. But when I call the endpoint to try and consume it with angular, I get a 404 error. When I open the console I am greeted with an error that states GET http://localhost:8000/static/api/products/ 404 (Not Found). However, when I navigate to the URL manually in browser I get the browsable api menu.
I'm not exactly sure what's going on here...but I'm thinking it could be because of my angular static URLs/roots.
Here is the current code for the main area URLs of the app:
from django.conf.urls import url,include
from django.contrib import admin
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^api/', include('customerreview_rest.urls', namespace='api')),
url(r'^api/',include ('products_rest.urls', namespace='api')),
url(r'^', include('GemStore_App.urls',namespace='frontend')),
] + static(settings.MEDIA_URL,document_root = settings.MEDIA_ROOT)
Here is the products URL/root for the endpoint:
from django.conf.urls import url,include
from rest_framework import routers
from products_rest.viewsets import ProductsViewsets
router = routers.DefaultRouter()
router.register('products',ProductsViewsets,'products')
urlpatterns = [
url(r'^', include(router.urls)) #base router
]
Lastly, here is the code for the static angular files:
from django.conf.urls import url, include
from django.views.generic.base import RedirectView
urlpatterns = [
url(r'^$', RedirectView.as_view(url='static/index.html', permanent=False), name='index')
]
Here also, is the code I planed to use to consume the api using Angular:
myStore.controller("myStoreController",function($scope,$http){
$scope.gems = $http.get("api/products/").then(
function(response){
$scope.gems = response.data
}, function(error){
$scope.error = error
});
})
Any light that can be shed on this topic, or maybe a point in the right direction would be greatly appreciated.
Thanks

Answer 1

Turns out that the issue was that I needed to include a another / in my call in order for it to be accepted.
So in summary, the code for the angular portian looks like this now:
myStore.controller("myStoreController",function($scope,$http){
$scope.gems = $http.get("/api/products/").then(
function(response){
$scope.gems = response.data
}, function(error){
$scope.error = error
});
})
#Sayse Thanks for helping.