You've seen how easy and cool synchronizing the changes from the server is. However, AngularFire takes it a notch further by introducing three-way data binding, whereby it is able to detect local changes, so we don't even have to call $save(). We just have to call $bindTo() on a synchronized object and any changes in the DOM are pushed to Angular and finally to Firebase. Conversely, any changes to the data get pushed to Angular and finally to the DOM.

So let's see it in action. The code for this example is very similar to the one we used in the synchronized arrays example, with a few changes. Here's the modified app.js file:

app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'main.html'
    })
    .when('/buildings', {
      templateUrl: 'building/buildings.tpl.html',
      controller: 'BuildingsCtrl'
    })
    .when('/buildings/:buildingIndex', {
      templateUrl: 'building/building.tpl.html',
      controller: 'BuildingCtrl...