deffer.promise result wont display in typehead using service

Question

i am using angularjs 1.7 and i am trying to display the result of the function using service in the typhead

<input type="text" id="oppId" name="oppId" aria-label="oppId"
       ng-model="oppId"
       typeahead="item for item in commonService.oppIdTypeAhead($viewValue) | limitTo:10"
       ng-blur="checkAndValidate($event)">

oppIdTypeAhead: function (val) {
            var deferred = $q.defer();
            var config = {
                method: "GET",
                headers: { Accept: "application/json" },
                url: constants.oppPickup,
                params: {
                    oppID: val
                },
                timeout: this._getCanceler('OppTypeAhead')
            };

            $http(config).then(function (data) {
                deferred.resolve(data.data);
            }).catch(function (data, status, headers, config) {
                if (status === 0 && data === null) {
                    deferred.reject('canceled');
                } else {
                    deferred.reject(data);
                }
            });
            console.log(deferred.promise);
            return deferred.promise;

this is the result returned by promise

it should display the list of results but then it has an exception of Object doesn't support property or method 'success'