I have a simple CRUD app that I am working on. It consists of a form with just a single text box, and all the entries submitted through the box should be displayed in a grid below the text box.
Everything seems to be working fine, except for the fact that the grid does not update with new entries unless the page is refreshed. My setup includes a loopback API running on localhost:3000 while my angular app is on localhost:9000. The database being used is MySQL.
The same code works perfectly if I use the MEAN stack. However, now we need to support MySQL and decouple the API from my application. Here is the controller:
angular.module('dashboardApp')
.controller('StateCtrl', function ($scope, $http) {
$scope.formData = {};
$scope.baseUrl = '//localhost:3000/api/v1/states';
$http.get($scope.baseUrl).success(function(states) {
$scope.states = states;
});
$scope.create = function() {
$http.post($scope.baseUrl, $scope.formData)
.success(function(states) {
$scope.states = states;
})
.error(function(states) {
console.log('Error: ' + states);
});
};
});
This is the view:
<form class="form-inline" role="form" data-ng-submit="create()">
<div class="form-group">
<label class="sr-only" for="name">State</label>
<input type="text" class="form-control" id="name" placeholder="Enter state" ng-model="formData.name">
</div>
<button type="submit" class="btn btn-default">Enter</button>
</form>
<table class="table table-striped">
<tr ng-repeat="state in states">
<td>{{state.name}}</td>
</tr>
</table>
Any assistance would be greatly appreciated. Just a quick note: I've also attempted to use services/resources instead of $http.