AngularJS submit function can't call service function more than once

Question

I am entirely new to AngularJS, and I'm trying to implement an API to get businesses by keyword. I want to be able to type in a keyword, call the API, and get an updated list each time I click the submit button. For some reason I can only get the data the first time I click submit; afterwards it no longer calls the service function:

edit I found that it does call the service, but it just returns 404. Why would this happen if I can call it correctly the first time?

app.controller('MainController', ['$scope','MyYelpAPI', function($scope, MyYelpAPI) {
    $scope.businesses = [];

    $scope.text = "business";
    $scope.inputText = "";
    $scope.submit = function() {
        $scope.inputText = $scope.text;
        MyYelpAPI.retrieveYelp('', $scope.text, function(data) {

            $scope.businesses = data.businesses;
        });
    };
}]);

Why can I not call the retrieveYelp() function more than once? I have the service implemented like this:

app.factory("MyYelpAPI", ['$http', function($http) {

return {
    "retrieveYelp": function(name, keyword, callback) {
        var method = 'GET';
        var url = 'http://api.yelp.com/v2/search';
        var params = {
            callback: 'angular.callbacks._0',
            location: 'San+Francisc',
            oauth_consumer_key: '/*removed for now*/',
            oauth_token: '/*removed for now*/',
            oauth_signature_method: "HMAC-SHA1",
            oauth_timestamp: new Date().getTime(),
            oauth_nonce: randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'),
            term: keyword
        };
            var consumerSecret = '/*removed for now*/';
            var tokenSecret = '/*removed for now*/';
            var signature = oauthSignature.generate(method, url, params, consumerSecret, tokenSecret, { encodeSignature: false});
            params['oauth_signature'] = signature;
            $http.jsonp(url, {params: params}).success(function(data, status){
            console.log(data);
            console.log(status);
        })
            .error(function(data, status){
                console.log("error");
                console.log(data);
                console.log(status);
            });
        counter++;
        console.log(counter);
        }
}
}]);

edit I found the solution! It has to do with the callback - apparently Angular needs callback : angular.callbacks._number to be different during each call. This is what I changed:

var params = {
            callback: 'angular.callbacks._' + counter,
            location: 'San+Francisc',
            oauth_consumer_key: '',
            oauth_token: '',
            oauth_signature_method: "HMAC-SHA1",
            oauth_timestamp: new Date().getTime(),
            oauth_nonce: randomString(32, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'),
            term: keyword
        };

I still don't fully understand why this is, so if someone could explain that would be helpful!

Answer 1

So I guess I found my own problem - I needed a different callback each time I send a request, so I changed this:

callback: 'angular.callbacks._' + counter,

And now it works. I read that I should be able to use

callback: 'JSON_CALLBACK'

But for some reason that doesn't work, and I have to manually increment the number at the end.

If someone could explain exactly why that would be awesome!