Passing firebase information through factory error - angularjs

Question

Alright my AngularJS Mates.. I need saving. The following is my code. As you can see i'm trying to like pass the firebase data through states, unfortunately 'Offer' is only displaying as '[]' I think this is because i'm using a $firebaseObject, but i just cant crack this code...
(yeah I totally stole a part of this from Codepen)
Legit i would get your address and send you roses if you fixed this for me.
My Factory:
.factory('PetService', function ($firebaseArray, $firebaseObject) {
var ref = new Firebase("https://idargo.firebaseio.com/userData")
var offer = ref.child('Offer');
var pets = [];
for (var i=0; i<100; i++) {
pets[i] = {
id: i,
'Name': 'Name' + i,
'Offer': $firebaseObject(offer)
};
}
return {
all: function () {
return pets;
},
get: function (petId) {
return pets[petId];
}
};
})
DashCtrl:
.controller('DashCtrl', function($scope, $state, $stateParams, PetService) {
$scope.pets = PetService.all();
})
ProfileCtrl:
.controller('ProfileCtrl', function($stateParams, PetService) {
$scope.pet = PetService.get($stateParams.petsId);
})
The State:
.state('app.profile', {
url: "/profile/:petsId",
views: {
'menuContent': {
templateUrl: "routes/profile.html",
controller: 'ProfileCtrl',
}
}
})
The Collection-Repeat:
<div class="col" collection-repeat="pet in pets" item-width="45%" item-height="35%" ui-sref="app.profile({petsId: pet.id })">
The Profile Html:
<div ng-cloak>
<ion-view title="{{pet.id}}">
<div class="bar bar-header loginbar">
<button class="button button-icon ion-ios-arrow-left loginhead" ui-sref="app.dash"></button>
<h1 class="title"></h1>
</div>
<ion-content>
<div>
<center>
<div class="top2">
<div class="wrapperinv">
<div style="padding-top: 15%"></div>
<div class="numberCircle">
<div class="height_fix"></div>
<div class="content"><img src="{{pet.Image}}" class="invoiceimage"></div>
</div>
<div style="margin-top: -100px;"></div>
<div class="mincirc">
<div style="margin-top: 8px;"></div>
<div class="rotate"><i class="icon ion-ios-telephone-outline invi"></i></div>
</div>
<div class="mincirc2" ui-sref="app.chat">
<div style="margin-top: 8px;"></div>
<div class="rotate"><i class="icon ion-ios-chatbubble-outline invi" ></i></div>
</div>
<div style="margin-top: 100px;"></div>
<label class="sometext">{{pet.firstName}}</label>
<div style="margin-top: -50px;"></div>
<h3>
<i class="ion-star invstar invi"></i> <i class="ion-star invstar invi"></i>
<i class="ion-star invstar invi"></i> <i class="ion-star invstar invi"></i>
<i class="ion-star invstar invi"></i>
</h3>
</div>
</div>
</div>
</center>
<div style="margin-top: -10px;"></div>
<div class="list" >
<label class="item item-icon-left">
<i class="icon ion-earth"></i>
<h4 class="invf">Location</h4>
<div class="invtext">{{pet.Name}}</div>
</label>
<label class="item item-icon-left">
<i class="icon ion-calendar"></i>
<h4 class="invf">Age</h4>
<div class="invtext">{{pet.Age}}</div>
</label>
<label class="item item-icon-left" style="word-wrap: break-word; width: 350px;">
<i class="icon ion-person"></i>
<h4 class="invf">About me</h4>
<div class="invtext" >{{item.About}}</div>
</label>
<label class="item item-icon-left">
<i class="icon ion-pizza"></i>
<h4 class="invf" >What I offer</h4>
<div class="invtext">{{pet.Offer}}</div>
</label>
<label class="item item-icon-left">
<i class="icon ion-cash"></i>
<h4 class="invf">Rate</h4>
<div class="invtext">{{item.Rate}}</div>
</label>
</div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d150038.30908416258!2d-74.00164182706976!3d40.64734690331712!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY%2C+USA!5e1!3m2!1sen!2sau!4v1440975673055" width="400" height="300" frameborder="0" style="border:0"></iframe>
<button class="button button-block invbut" ng-click="invoice()">
Book With {{item.Name}}
</button>
</div>
</div>
</ion-content>
</ion-view>
</div>
Thanks in advance!
-Sorry if my English is bad... i'm from Australia.