angular dot syntax with promise not working

I am returning a promise from a service with a resolve in my $stateProvider

I then add the promise to my controllers view model before the controller is instantiated

I am trying to use the dot syntax to access different parts of the promise but its not working

also when i show the whole promise (vm.detail = historyDetailPromise) it just shows as JSON

HELP!!

depositDetail.html

(function () {
    'use strict';

    angular
        .module('app.history')
        .config(stateProvider)
        .controller('HistoryDetail', HistoryDetail);

    stateProvider.$inject = ['$stateProvider'];
    HistoryDetail.$inject = ['historyDetailPromise'];

    /* @ngInject */
    function stateProvider($stateProvider){
        $stateProvider
            .state('app.history-detail', {
                url: "/history/:id",
                views: {
                    'menuContent': {
                        templateUrl: "app/history/depositDetail.html",
                        controller: 'HistoryDetail as vm',
                        resolve: {
                            historyDetailPromise: function(historyService, $stateParams){
                                return historyService.historyDetail($stateParams.id);
                            }
                        }
                    }
                }
            })
    }

    /* @ngInject */
    function HistoryDetail(historyDetailPromise) {
        /* jshint validthis: true */
        var vm = this;

        vm.activate = activate;
        vm.title = 'HistoryDetail';
        vm.detail = historyDetailPromise;

        activate();

        ////////////////

        function activate() {
        }


    }

})();
<ion-view view-title="{{vm.title}}">
  <ion-content>
    <h1>{{vm.title}}</h1>
    <h1>{{vm.detail.id}}</h1>
  </ion-content>
</ion-view>

all I actually needed to do was use vm.detail = historyDetailPromise[0]; in my controller since the returned promise was an array not an object, and I was missing the [0]