Highly strange error in Angular application - angularjs

Question

I have a SQL Server database and an Asp.net web api for my web service.
I have below UI for adding a category
I have below UI for adding a expense in that category
After I login into the application.
Category:
I am creating a category which is getting created and in the database there is a record. Refreshing the page it displays the category. After logging out and logging in again the category is not displayed here.
Expense :
When I create a new expense, it is not displayed at all. But the created category is taken into the drop down but not displayed as in the screenshot above.
Code as below
Inserting my expense
$scope.insertExpense = function () {
var ExpenseObj = {
"AmountSpent": $scope.amountspent,
"DateofExpense": $scope.datevalue,
"UserID": $rootScope.id,
"CategoryID": $scope.selectedcategory.Id
};
appResources.expenseResource.save(ExpenseObj, function () {
alert("Expense Added");
});
}
I retrieve my category using
appResources.categoryResource.query(function (data) {
$scope.Categories = data;
console.log(data);
});
I retrieve my category using
appResources.expenseResource.query(function (data) {
$scope.Expenses = data;
console.log(data);
});
AppResources has only the webapi calling mechanism as
expenseManager.factory('appResources', function ($resource) {
var baseURL = "http://localhost:8080"
var registerResource = $resource(baseURL+'/api/Register/:id');
var categoryResource = $resource(baseURL + '/api/Category/:id');
var expenseResource = $resource(baseURL + '/api/Expense/:id');
return {
registerResource: registerResource,
categoryResource: categoryResource,
expenseResource: expenseResource
}
});