firebase - AngularJS “Wire up a Backend” example not loading data on edit dialog

Question

I'm new to Firebase... I'm trying to get the "Wire up a Backend" example at Angularjs' home page to run locally.

I got past the common ngRoute problem and the app is actually working fine, except for the edit dialog, that doesn't load data from the Firebase.

The list.html partial loads fine and renders the data, and the detail.html also loads fine when loaded by the CreateCtrl controller, which does save data to the Firebase as expected.

The problem is with the EditCtrl controller, which renders the detail.html partial without the record's data in the fields.

What makes me nuts is that the example at Angular's page seems to use the exact same code, and everything works at their end. I've tried isolating the problem, with no avail.

I've converted the example into an app and created a repository at Github. The repo is bloated with unrelated development stuff, but the app is supposed to work straight out of the ZIP file.

Really appreciate any leads, cheers!

app.js

var myAppModule = angular.module('project', ['ngRoute', 'firebase'])

.value('fbURL', 'https://color-consolidator.firebaseio.com')

.factory('Projects', function($firebase, fbURL) {
    return $firebase(new Firebase(fbURL));
});

myAppModule.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        controller:'ListCtrl',
        templateUrl:'list.html'
    })
    .when('/edit/:projectId', {
        controller:'EditCtrl',
        templateUrl:'detail.html'
    })
    .when('/new', {
        controller:'CreateCtrl',
        templateUrl:'detail.html'
    })
    .otherwise({
        redirectTo:'/'
    });
});

myAppModule.controller('ListCtrl', function($scope, Projects) {
    firebaseConn();
    $scope.projects = Projects;
});

myAppModule.controller('CreateCtrl', function($scope, $location, $timeout, Projects) {
    firebaseConn();
    $scope.save = function() {
        Projects.$add($scope.project, function() {
            $timeout(function() { $location.path('/'); });
        });
    };
});

myAppModule.controller('EditCtrl', function($scope, $location, $routeParams, $firebase, fbURL) {
    firebaseConn();
    var projectUrl = fbURL + $routeParams.projectId;
    $scope.project = $firebase(new Firebase(projectUrl));
    $scope.destroy = function() {
        $scope.project.$remove();
        $location.path('/');
    };
    $scope.save = function() {
        $scope.project.$save();
        $location.path('/');
    };
});

detail.html

<form class="form-group" name="myForm">
    <div class="form-group" ng-class="{error: myForm.name.$invalid}">
        <label class="control-label" for="name">Name</label>
        <input type="text" class="form-control" name="name" ng-model="project.name" required>
        <span class="help-block" ng-show="myForm.name.$error.required">Required</span>
    </div>
    <div class="form-group" ng-class="{error: myForm.site.$invalid}">
        <label class="control-label" for="site">Site URL</label>
        <input type="url" class="form-control" name="site" ng-model="project.site" required>
        <span class="help-block" ng-show="myForm.site.$error.required">Required</span>
        <span class="help-block" ng-show="myForm.site.$error.url">Not a URL</span>
    </div>
    <div class="form-group">
        <label for="description">Description</label>
        <textarea class="form-control" name="description" ng-model="project.description"></textarea>
    </div>
    <a href="#/" class="btn btn-default">Cancel</a>
    <button type="button" class="btn btn-primary" ng-click="save()" ng-disabled="myForm.$invalid">Save</button>
    <button type="button" class="btn btn-danger" ng-click="destroy()" ng-show="project.$remove">Delete</button>
</form>

Answer 1

Waitting for answers