由于ng-controller而失去angularjs bootstrapping

Question

我是棱角分明的新手并不熟悉javascript和jade，所以我的问题听起来很愚蠢。我的网络应用程序基于以下网站：http://www.mircozeiss.com/sync-multiple-angularjs-apps-without-server-via-pouchdb/。它使用pouchdb来构建待办事项列表。我有三个不同的文件：服务，控制器和索引。

服务

var app = angular.module('myApp', []);

app.value('version', '0.1');

app.factory('myPouch', [function() {

    var mydb = new PouchDB('ng-pouch');
    PouchDB.replicate('ng-pouch', 'http://127.0.0.1:5984/clients', {continuous: true});
    PouchDB.replicate('http://127.0.0.1:5984/clients', 'ng-pouch', {continuous: true});
    return mydb;

}]);

app.factory('pouchWrapper', ['$q', '$rootScope', 'myPouch', function($q, $rootScope, myPouch) {

    return {
        add: function(text) {
            var deferred = $q.defer();
            var doc = {
                type: 'todo',
                text: text
            };
            myPouch.post(doc, function(err, res) {
                $rootScope.$apply(function() {
                    if (err) {
                        deferred.reject(err);
                    } else {
                        deferred.resolve(res);
                    }
                });
            });
            return deferred.promise;
        },
        remove: function(id) {
            var deferred = $q.defer();
            myPouch.get(id, function(err, doc) {
                $rootScope.$apply(function() {
                    if (err) {
                        deferred.reject(err);
                    } else {
                        myPouch.remove(doc, function(err, res) {
                            $rootScope.$apply(function() {
                                if (err) {
                                    deferred.reject(err);
                                } else {
                                    deferred.resolve(res);
                                }
                            });
                        });
                    }
                });
            });
            return deferred.promise;
        }
    };

}]);

app.factory('listener', ['$rootScope', 'myPouch', function($rootScope, myPouch) {

    myPouch.changes({
        continuous: true,
        onChange: function(change) {
            if (!change.deleted) {
                $rootScope.$apply(function() {
                    myPouch.get(change.id, function(err, doc) {
                        $rootScope.$apply(function() {
                            if (err) console.log(err);
                            $rootScope.$broadcast('newTodo', doc);
                        });
                    });
                });
            } else {
                $rootScope.$apply(function() {
                    $rootScope.$broadcast('delTodo', change.id);
                });
            }
        }
    });
}]);

控制器

var app = angular.module('myApp', []);


app.controller('TodoCtrl', ['$scope', 'listener', 'pouchWrapper', function($scope, listener, pouchWrapper) {

    $scope.submit = function() {
        console.log('submit');
        pouchWrapper.add($scope.text).then(function(res) {
            console.log('test');
            $scope.text = '';
        }, function(reason) {
            console.log(reason);
        });
    };

    $scope.remove = function(id) {
        pouchWrapper.remove(id).then(function(res) {
//      console.log(res);
        }, function(reason) {
            console.log(reason);
        });
    };

    $scope.todos = [];

    $scope.$on('newTodo', function(event, todo) {
        $scope.todos.push(todo);
    });

    $scope.$on('delTodo', function(event, id) {
        for (var i = 0; i<$scope.todos.length; i++) {
            if ($scope.todos[i]._id === id) {
                $scope.todos.splice(i,1);
            }
        }
    });

}]);

索引

doctype html
html(ng-app='myApp')
  head
    title=title
    link(rel='stylesheet' href='stylesheets/style.css')
    link(rel='stylesheet' href='bower_components/bootstrap/dist/css/bootstrap.css')
    script(type='text/javascript' src='javascripts/angular-1.2.16.min.js')
    script(type='text/javascript' src='javascripts/pouchdb-2.1.0.min.js')

    script(type="application/javascript" src="app/controllers.js")
    script(type="application/javascript" src="app/services.js")
  body

    .container(ng-controller='TodoCtrl')
        h1 TODO application
        p 1 + 2 = {{ 1 + 2 }}
            p
                form.form-inline(ng-submit='submit()')
                    input(placeholder='New task', type='text', ng-model='text')
                    input.btn.btn-primary(type='submit', value='Add')
            p
                table.table.table-hover.span3
                    thead
                        tr
                            th Task
                            th  
                    tbody
                        tr(ng-repeat='todo in todos')
                            td {{todo.text}}
                            td
                                a.btn.btn-mini.btn-danger(ng-click='remove(todo._id)', href='#') remove

在这个例子中，我的控制器'TodoCtrl'螺丝angularjs'自举（我没有得到结果3）。如果我删除容器（使用控制器），我得到预期的结果，但我不能使用我的控制器。无论如何，使用容器，提交操作似乎也不起作用。

有什么想法吗？我真的很想知道我做错了什么......

谢谢！