Nested controller issue

I don't know if my title describe well my problem but, it's what i think happen here. What am trying to do is to add facebook login to my app that i used the sidemenu ionic template and i followed the tutorial ionic facebook integration

It works well no issues on both browser and mobile but, when i tried to show the facebook data profile picture not in the template profile but, in the top of my side menu i got two issues.

First i need to refresh the browser so the picture show.

Second issue i get this alert Facebook error: undefined which is in the profileCtrl

i get this error when i created a div inside of the menu template and sat ng-controller="profileCtrl" here i think the app get a conflict because the APPCtrl is the controller of the menu Template like this:

templateUrl: "templates/menu.html",
controller: 'AppCtrl'

here is the code i added to the menu template to show the picture and the user name in the top of the side menu:

<div ng-controller="ProfileCtrl" class="user-pro">

        <img src="http://graph.facebook.com/{{user.id}}/picture?width=100&height=100"/>
        <p class="text-center user-name side-btn">{{user.name}}</p>

 </div>

and here is the menu template code and how i putted my code in it :

<ion-side-menus>
  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left">
    <ion-content class="has-header side-bg"><!-- sidebar -->
            <!-- user profile here -->
     <div ng-controller="ProfileCtrl" class="user-pro">
        <img src="http://graph.facebook.com/{{user.id}}/picture?width=100&height=100"/>
        <p class="text-center user-name side-btn">{{user.name}}</p>
     </div><!-- user Profile -->
     <ion-list>
      <ion-item>
      </ion-item>
     </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

I wrapped the side menu template with a <div ng-controller="AppCtrl" and do the hierarchy explained here angular.js hierarchy controller guide and SURE i did deleted the controller: 'AppCtrl' from here

.state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/menu.html",
      controller: 'AppCtrl'
    })

but it did't work.

sorry for being long.