Connecting Angular to MySQL through LoopBack

client.js

// angular service
app.factory('Restaurant', function($resource) {
  return $resource('/api/restaurants/:id', {id: '@id'});
});

db.js

var db = app.dataSource('db', {
  "connector": require('loopback-connector-mysql'),
  "host": "demo.strongloop.com",
  "port": 3306,
  "database": "demo",
  "username": "demo",
  "password": "L00pBack"
});

gistfile1.txt

<table class="table table-hover table-striped">
  <tr ng-repeat="restaurant in restaurants">
    <td>
      <a href="#/menu/{{restaurant.id}}">
        <img class="img-rounded pull-left" ng-src="img/restaurants/{{restaurant.shortName}}.jpg">
        <b>{{restaurant.name}}</b>
      </a>
      <p>{{restaurant.description}}</p>
    </td>
    <td>
      <fm-rating ng-model="$parent.restaurant.rating" readonly="true"></fm-rating>
    </td>
    <td>
      <fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true" ></fm-rating>
    </td>
  </tr>
</table>

RestaurantsController.js

app.controller('RestaurantsController',
    function RestaurantsController(Restaurant) {

  $scope.restaurants = Restaurant.query(filterAndSortRestaurants);
});

server.js

// LoopBack model
var Restaurant = app.model('restaurant', {
  dataSource: 'db',
  properties: {
    id: {type: String, id: true, generated: true},
    shortName: String,
    price: Number,
    rating: Number,
    cuisine: String,
    opens: String,
    closes: String,
  }
});