TypeError: cannot read property .then of undefined

Question

I take input and look it up in the description of each item. The console statement in the service shows the desired output, but the promise in ctrl is where the error occurred. What am I missing?

    NarrowItDownController.$inject=['MenuSearchService'];

    function NarrowItDownController(MenuSearchService) {
        var ctrl = this;
        ctrl.searchTerm = "";
        ctrl.found=[];
        ctrl.searchlist = function () {
            if (ctrl.searchTerm.length > 0) {
                console.log(ctrl.searchTerm);
                var promise = MenuSearchService.getMatchedMenuItems(ctrl.searchTerm);
                promise.then(function (result) {
                    ctrl.found = result;
                }).catch(function (error) {
                    console.log("something went wrong!!!");
                });
            }
        };
    }

    MenuSearchService.$inject = ['$http'];

    function MenuSearchService($http)  {
        var service= this; 
        var found = [];
        service.getMatchedMenuItems = function (searchTerm) {
            var response = $http({
                method: "GET",
                url: ("https://davids-restaurant.herokuapp.com/menu_items.json")
            }).then(function (response) {
                for (var i = 0; i < response.data.menu_items.length; i++) {
                    if (response.data.menu_items[i]
                            .description.toLowerCase().indexOf(searchTerm)>-1 ) {
                        found.push(response.data.menu_items[i]);
                    }
                }
                console.log(found);
                return found;
            }, function() {
                console.log('error');
            });
        };
    }

}) ();

Answer 1

You never return the created promise from your function getMatchedMenuItems so calling promise.then(function (result) will fail. Change this line in getMatchedMenuItems from

var response = $http({...

to

return $http({...

The solution is to work with promises throughout the whole stack. Have that service function return the promise and let the controller call then so it can do work once the promise is resolved.

---

I am tempted to mark this as duplicate of How do I return the response from an asynchronous call?. I recommend reading through it at least which should give you a better idea of how to work with promises.