Angularjs array not updating after AJAX call

Question

I'm still new to Angularjs and still learning it.

My issue is that when I define an array and loop through it using "ng-repeat" the items in ng-repeat don't get update after a function runs. Here is a jsfiddle an example.

http://jsfiddle.net/ematevosyan/t3ruzytk/8/

function MyCtrl($scope) {

    // init google maps auto complete input
    var options = {
        types: ['(cities)']
    },
    input = document.getElementById('searchTextField'),
        autocomplete = new google.maps.places.Autocomplete(input, options);

    // sample array
    $scope.testArray = [{
        name: 'item1'
    }];

    // function to test a push into array
    $scope.testPush = function () {
        $scope.testArray.push({
            name: 'item2'
        });
    }

    // change listener for google input autocomplete
    $scope.inputChanged = google.maps.event.addListener(autocomplete, 'place_changed', function () {

        // set var as location
        $scope.specificLocation = autocomplete.getPlace().formatted_address;
        //alert($scope.specificLocation);

        $.ajax({
            type: 'GET',
            url: 'https://api.github.com/repos/bvasko/Bootstrap-Select-Box',
            async: false,
            contentType: "application/json",
            dataType: 'jsonp',

            success: function (data) {
                alert(data);
                $scope.testArray.push({
                    name: $scope.specificLocation
                });
            }, 

            error: function (e) {
                console.log(e.message);
            }


        }); // end ajax call



    });


}

As you can see the example button works as expected, when you click it, it pushes a new item into the array and the ng-repeat is updated. But once you input a location in the input field and the array is updated, the new item is pushed into the array but the ng-repeat items are not. I need it to update the ng-repeat items as soon as a user enters a location.

I have tried using Angular's $http instead of $ajax and I have also tried using $apply neither of which worked. I feel like I'm missing something simple just don't know what.

Answer 1

Try:

$scope.$apply();

after you insert the object into the array.

From the Documentation:

"$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life cycle of exception handling, executing watches."

https://docs.angularjs.org/api/ng/type/ $rootScope.Scope#$apply

JSFiddle: http://jsfiddle.net/yn0u67fo/

Answer 2

Using $.ajax and $apply is not the angular way to go. You should call the api with $http as you tried:

$http.jsonp('https://api.github.com/repos/bvasko/Bootstrap-Select-Box?callback=JSON_CALLBACK')
    .then(function (response) {
        $scope.testArray.push({
            name: $scope.specificLocation
        });
    });

See your updated fiddle