ionic side menu scope variable

I want to add dynamic content to my side menu based on scope variables defined in services.js

currently the content of the user array doesn't load.

my app.js to define the controller.

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('menu', {
    url: '/menu',
    templateUrl: 'templates/menu.html',
    controller: 'MenuCtrl'
  })

controllers.js

angular.module('starter.controllers', [])

.controller('MenuCtrl', function($scope, UserInfo ) {
  $scope.user = UserInfo;
})

services.js

angular.module('starter.services', [])

.factory('UserInfo', function() {
  var User = {
    fname : "First",
    lname : "Last",
  };

  return User;
});

menu.html

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>

      <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    </ion-nav-bar>
    <ion-nav-view name="menuContent"></ion-nav-view>
  </ion-side-menu-content>

  <ion-side-menu side="left">
    <ion-header-bar class="bar-stable">
      <h1 class="title">{{user.fname}} {{user.lname}}</h1>
    </ion-header-bar>
    <ion-content>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>