How to replicate pouchdb with angular js

I'm using Couch DB to store locations for my cordova ionic app. I'm also using PouchDB for replicating the data. Everything works great but it seems like the first replication doesn't get to finish before my application continues. That cause my data not show until the the second time i enter the page. The "complete" option doesn't seems to work(Or i don't know how to use it because the alert doesn't get fired). I tried to resolve everything but no change.

Here is my code in an angular service:

var db = new PouchDB('gardens');
var remoteDB = "https://test.couchappy.com/test";
var opts = {continuous: true, xhrFields:{withCredentials:true}, complete: function() {
  alert('test');
}};
db.replicate.from(remoteDB, opts);
var gardens2 = [];

db.allDocs({include_docs: true}, function(err, doc) {
  console.log(doc);
  _.each(doc.rows, function(i){
    console.log(i.doc.name);
    gardens2.push({
      name: i.doc.name,
      lat: i.doc.lat,
      lng: i.doc.lng,
      message: i.doc.message
    });
  });
  console.log(gardens2);