Set up Three-way data binding in angularjs with angularfire

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) {
    .when('/', {
      templateUrl: 'main.html'
    .when('/buildings', {
      templateUrl: 'building/buildings.tpl.html',
      controller: 'BuildingsCtrl'
    .when('/buildings/:buildingIndex', {
      templateUrl: 'building/building.tpl.html',
      controller: 'BuildingCtrl'
      redirectTo: '/'


Notice here how we are configuring the second route with /buildings/:buildingIndex. :buildingIndex is the variable part of the URL.

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

Pin It on Pinterest