angular ui-router nested resolves are not resolving

I have nested ui-views which are both waiting on data from http request. In the following code i have simulated this with timeouts. If i set the timeouts any longer than 10 ms then my plunker wont load at all.

var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){

  // For any unmatched url, send to /route1
  $urlRouterProvider.otherwise("/route1")
  try{
  $stateProvider
  .state('contacts', {
    templateUrl: 'contacts.html',
    controller: function($scope, service1){
        $scope.title = service1.getData()
    }
    ,resolve:{
      titlePromise:function(service1){
      return service1.myPromise
    }}
  })
  .state('contacts.list', {
    templateUrl: 'contacts.list.html',
    controller: function($scope, service2){
        $scope.contacts = service2.getData();
    },
    resolve:{
      contactPromise:function(service2){return service2.myPromise}
    }
  });
  }catch(e){
    alert.log(e);
  }
});

The services are defined as follows.

myapp.factory('service1',['$q', function($q){
  var title = 'Not Yet';
  var _promise = $q.defer();
  setTimeout(function(){

    title='My Contacts';
    _promise.resolve(true);
  },100);

  return {
    getData:function(){return title},
    myPromise: _promise.promise
  }
}]);

myapp.factory('service2',['$q','service1', function($q, service1){

  var data =  [];
  var _promise = $q.defer();
  setTimeout(function(){
    service1.myPromise.then(function(){
      data=[{ name: 'Alice' }, { name: 'Bob' }];
      _promise.resolve(true);
    })
  },100);
  return{
    getData:function(){return data},
    myPromise:_promise
  }
}]);

I need service2 to wait until service 1 returns its data in order to fulfill its request.The way I have it set up does not seem to work. What have I done wrong? If there is a better way to set up my app any suggestions are appreciated. I have modified the ui-view nested view demo plunker her: plnkr