Angular JS / Ui router - Post Image URL in StateParams

I've a little issue : In my HomePage, I've an NG-repeat with image in post. When I want click in one post, I have this error :

TypeError: Cannot read property 'facebook' of undefined
    at new <anonymous> (app.js:234)
    at invoke (ionic.bundle.js:12877)
    at Object.instantiate (ionic.bundle.js:12885)
    at ionic.bundle.js:17154
    at IonicModule.controller.self.appendViewElement (ionic.bundle.js:48176)
    at Object.IonicModule.factory.ionicViewSwitcher.create.switcher.render (ionic.bundle.js:46392)
    at Object.IonicModule.factory.ionicViewSwitcher.create.switcher.init (ionic.bundle.js:46312)
    at IonicModule.controller.self.render (ionic.bundle.js:48050)
    at IonicModule.controller.self.register (ionic.bundle.js:48008)
    at updateView (ionic.bundle.js:53315)

AND

GET http://127.0.0.1:8103/%7B%7BauthData.facebook.cachedUserProfile.picture.data.url%7D%7D 404 (Not Found)

This is my HTML :

<div ng-repeat="(id,post) in posts">

    <div class="card" ui-sref="tabpost({ postname: post.nameid, postdescription: post.descriptionid, postdate: post.startdateid, posthour: post.starthourid, postprice: post.priceid, postnbguest: post.nbguestid, postpicture: post.pictureid })">
        <div class="item item-divider" ng-class="{{post.starthourid | setImageClass}}">
        <h2 class="text stable"> {{ post.nameid }} </h2>
        <h3 class="text stable" id="header-date">
        <i class="icon ion-clock"></i> Le {{ post.startdateid | date : "d MMM" }} à {{ post.starthourid | date : "HH:mm" }}</p>
      </div>
      <div class="row">
      <div class="col">
        <h3><i class="icon ion-ios-location"></i> À 500m</h3></div>
      <div class="col"><h3><i class="icon ion-ios-people">
        </i> 2/{{ post.nbguestid }} </h3></div>
      </div>
      <button class="button button-stable" id="positive-btn-price" disabled>{{ post.priceid }}€</button>
      <img class="imgProfilPostPositive" src="{{ post.userid.facebook.cachedUserProfile.picture.data.url }}">
      <div class="item item-divider" id="footerPostNotepositive"><p> <i class="fa fa-star"></i> Popular </p> </div>
        </div>
      </div>

</div></div>

App JS :

  .state('tabpost', {
  url: '/tabpost/:postname/:postdescription/:postdate/:posthour/:postprice/:postnbguest/:postpicture',
  templateUrl: 'templates/tab-post.html',
  controller: 'PostCtrl',
  })

Controller JS :

        $scope.nameid = $stateParams.postname;
        $scope.descriptionid = $stateParams.postdescription;
        $scope.startdateid = $stateParams.postdate;
        $scope.starthourid = $stateParams.posthour;
        $scope.priceid = $stateParams.postprice;
        $scope.nbguestid = $stateParams.postnbguest;
        $scope.userid.facebook.cachedUserProfile.picture.data.url = $stateParams.postpicture;

How can I pass my picture in my Post page ?

Thanks for your time.

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

The buggy way to write it:

<img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>

The correct way to write it:

<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />

https://docs.angularjs.org/api/ng/directive/ngSrc